AngularJS REST Api Select box ng-change

Question

I am loading data into select boxes from external url. The problem is that ng-change is not triggered at all. However, if I create a local array it works!! I would like to update the main url based on the selection.

I noticed however, that the 'value' field of the options are 'undefined', but the select box gets populated with post.site_name.

HTML:

<select ng-options="site_name as post.site_name for post in posts"
            ng-model="something" ng-change="updatee(post.path)">
    <option>Select</option>
</select>

Controller:

 .controller('HotelCtrl', function( $scope, $http, DataLoader, $timeout, $rootScope, $log ) 
{
 var postsApi = 'http://my_URL';

 $scope.updatee = function(newLink) {
    console.log('works');
    $rootScope.url = newLink;
 };

 $scope.loadPosts = function() {
   DataLoader.get( postsApi ).then(function(response) {
       $scope.posts = response.data;

   }, function(response) {
      $log.error('error', response);     
   });
 }

 $scope.loadPosts();

})

And the service:

.factory('DataLoader', function( $http, $log ) {
 return {
  get: function(url) {
    // Simple index lookup
    return $http.get( url );
  }
 } 
})

I've been at this at least a day now, and going crazy... Appreciate any help. Thanks

Answer 1

Can you try this select tag.

<select ng-options="post.site_name as post.site_name for post in posts"
        ng-model="something" ng-change="updatee(post.path)">

The ng-options syntax is select_ (as _label_)? for (_key_,)?_value_ in _collection_

You are passing label correctly, but not the select. so post.path is not properly loaded.