0

Here is my jquery ajax call

jQuery.ajax({
            url: view_url+"get_messagekinds",
            success: function (result) {
                $scope.response = result;
            },
            async: false
        });

and here is html code:

<select id="select_msg_kind"
                    name="select_msg_kind"
                    class="form-control"
                    ng-model="message_kind_selected" style="height:30px;width:220px">
                    <option value="0">--Select Message Kind--</option>
                    <option ng-repeat="res in response track by $index" value="{{ res.id }}">
                        {{ res.name }}
                    </option>
                </select>

but select list is empty. here is screenshot

enter image description here

How can i populate select list with data returned by ajax call using ng-repeat?

Here is data returned by ajax call:

[{"id": 1, "name": "Test1"}, {"id": 2, "name": "test2"}, {"id": 3, "name": "Test3"}]
Sony Khan
  • 1,330
  • 3
  • 23
  • 40
  • please add the result from ajax as well – guradio Aug 08 '16 at 08:21
  • @guradio updated my question – Sony Khan Aug 08 '16 at 08:25
  • 1
    Tip: Don't use `jQuery.ajax`, instead use angular's `$http`-service. The latter will notice angular that a so called "digest-cycle" should run – devqon Aug 08 '16 at 08:25
  • i needed synchronous call. can you give me synchronous code for angularjs as i have searched but not found any satisfactory solution – Sony Khan Aug 08 '16 at 08:27
  • @ShoaibAkhtar You should never need nor use any synchronous AJAX calls in JavaScript [this SO answer](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call#answer-14220323) may help you find a better way. – ste2425 Aug 08 '16 at 08:40

1 Answers1

0

Tip: Don't use jQuery.ajax, instead use angular's $http-service. The latter will notice angular that a so called "digest-cycle" should run:

$http.get(url).then(function(result) {
    // success
    $scope.response = result;
}, function() {
    // error
});

If you really want to use jquery's ajax (I think your reason is because you use async: false), you should trigger the digest cycle yourself:

jQuery.ajax({
    url: view_url+"get_messagekinds",
    success: function (result) {
        // trigger digest cycle with '$apply'
        $scope.$apply(function() {
            $scope.response = result;
        });
    },
    async: false
});

You should not use async however, you can just use the promises and the callback functions of the $http service.

devqon
  • 13,818
  • 2
  • 30
  • 45
  • getting this error: angular.min.js:107 Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.4/$rootScope/inprog?p0=NaNigest at Error (native) at http://10.10.10.10:8000/static/cmt_beta/js/angular.min.js:6:416 at q (http://10.10.10.10:8000/static/cmt_beta/js/angular.min.js:125:271) at n.$apply – Sony Khan Aug 08 '16 at 08:31