ng-repeat后AngularJS代码不起作用

Question

I have a page where we get a list of users using angular $http from backend as shown below.

myApp.controller("MyCntrl", function ($scope, $http) {
   $scope.users= [];
   $scope.countries = function () {
        $http.get(url).success(function (data, status, headers, config) {
            return data;
        });
    };

   $scope.getUsers = function () {
        $http.get(url).success(function (data, status, headers, config) {
            $scope.users= data;
        });
    };
});

And my html is like:

<div ng-app="myApp" ng-controller="MyCntrl" ng-init="getUsers()">
  <p ng-repeat="user in users">{{user.UserName}}</p>

  <select>
      <option ng-repeat="country in countries">{{country.CountryName}}</option>
  </select>
</div>

Everything is working fine up to displaying users.

But the code after ng-repeat of users is not working. I'm not able to see the list of countries in the dropdown. I can see the json list of both users and countries in firebug. Can anyone help me on this?

My countries Json is

[{CountryId:1,CountryName:"India"}]

What i've observed is that the angular code is not working after the first ng-repeat of users. When i try to see the length of countries json like

<p>{{countries.length}}</p>

It is just printing {{countries.length}} in browser

Answer 1

You will have to use ng-options instead in the case of <select> :

<select ng-model="selectedCountry" ng-options="country.countryName for country in countriesData">
</select>

Edit :

Replace this:

$scope.countries = function () {
  $http.get(url).success(function (data, status, headers, config) {
    return data;
  });
};

By this:

$http.get(url).success(function (data, status, headers, config) {
  $scope.countriesData = data;
});

NOTE: Checked that url is defined !

Answer 2

You can set the returned data for $scope.countries just as you've done for $scope.users , except you don't need to define a function that you'd call in your view to get all the countries.

Instead, call this function in your controller which in turn will set the countries variable into the scope:

this.getCountries = function () {
    $http.get(url).success(function (data, status, headers, config) {
        $scope.countries = data;
    });
};

// call the method to get the countries 
this.getCountries();

Note that in your code you have return = data which might be causing a syntax error.

Answer 3

You have call function in ng-repeat that's why its not working properly.Correct code should be like below

myApp.controller("MyCntrl", function ($scope, $http) {
    $scope.users= [];
    $scope.getCountry = function () {
        $http.get(url).success(function (data, status, headers, config) {
          $scope.countries = data;
       });
    };

    $scope.getUsers = function () {
        $http.get(url).success(function (data, status, headers, config) {
           $scope.users= data;
           $scope.getCountry();
        });
    };
});