javascript - Using http requests, promises, ng-options, and factories or services together -

i'm trying retrieve list of options our database , i'm trying use angular it. i've never used services before know that's going best way accomplish want if i'm going use data object in other controllers on page.

i followed couple tutorials , put factory makes http request , returns data. i've tried several ways of doing it, reason nothing happening. it's never runs factory function , can't figure out why.

factory:

resortmodule= angular.module('resortapp',[]);  resortmodule.factory('locaservice',['$http', function ($http){     var locaservice= {};     locaservice.locations = {};     var resorts = {};      locaservice.getlocations=         function() {             $http.get('/url/url/dest/').success(function (data) {                 locaservice.locations = data;                });             return locaservice.locations;         };     return locaservice;      //this function run in addition first 1 multiple variables stored , accessible          /*getresorts:             function(destination) {                 $http.get('/url/url/dest/' + destination.id).success(function (data) {                     resorts = data;                 });                 return resorts;         }*/ }]);   resortmodule.controller('querycontroller',['$scope', 'locaservice',   function($scope, locaservice) {     $scope.checkconditional= function (){             if($("#location").val() == ""){             $("#location").css('border','2px solid #ec7c22');             }     };     $scope.selectcheck= function (){         $("#location").css('border','2px solid #ffffff');         $(".conditional-check").hide();     };     $scope.resort;     $scope.locations= locaservice.getlocations(); }]); 

i want data returned , assigned $scope.locations used ng-options in view. want other function run on click next field populated variable resort. how this? great! thanks!

$http service returns promise, , function should return promise. getlocations function should following

locaservice.getlocations=     function() {         return $http.get('/url/url/dest/');     }; 

then in controller should retrieve options using promise:

locaservice.getlocations()     .then(         function(locations) // $http returned successful result            {$scope.locations = locations;}        ,function(err){console.log(err)} // incase $http created error, log returned error); 

using jquery in controllers or manipulating dom elements in controllers not practice, can apply styles , css classes directly in views using ng-style or ng-class. here example how should wired up:

resortmodule= angular.module('resortapp',[]);  resortmodule.factory('locaservice',['$http', function ($http){     var locaservice= {       locations: {}     };     var resorts = {};      locaservice.getlocations= function() {         return $http.get('/url/url/dest/');     };     return locaservice;      //this function run in addition first 1 multiple variables stored , accessible          /*getresorts:             function(destination) {                 $http.get('/url/url/dest/' + destination.id).success(function (data) {                     resorts = data;                 });                 return resorts;         }*/ }]);   resortmodule.controller('querycontroller',['$scope', 'locaservice',   function($scope, locaservice) {     /* apply these styles in html using ng-style     $scope.checkconditional= function (){             if($("#location").val() == ""){             $("#location").css('border','2px solid #ec7c22');             }     };     $scope.selectcheck= function (){         $("#location").css('border','2px solid #ffffff');         $(".conditional-check").hide();     };     */     $scope.resort;      locaservice.getlocations()     .then(         function(locations) // $http returned successful result            {$scope.locations = locations;}        ,function(err){console.log(err)} // incase $http created error, log returned error); }]);