angularjs - Why is Angular not updating with a JSON file? -

i'm trying use simple angular js app load data json file website not work.

the json file is:

{"a": "a"} 

the angular app is:

var app = angular.module("app", [])   .controller("ctrl", ["ser", function(ser) {     var vm = this;      ser.getinfo().then(function(data) {       vm.data = data;     });   }])   .service("ser", function() {     this.getinfo = function() {       return $.get("models/model.json");     };   }); 

the html is:

<div ng-controller="ctrl ctrl">   <p>{{ctrl.data.a}}</p> </div> 

i'm not getting console errors. think problem related lexical scoping controller due asynchronous getinfo().then() call in controller, checked vm inside function , being loaded correctly doesn't seem change ctrl object or angular not updating when does.

i'm serving app locally.

it works times doesn't. can work using $scope i'm trying figure out why it's not working now.

it appears using jquery ajax. if modify scope outside of angular context need notify angular run digest

change using angular $http avoid such issues

var app = angular.module("app", [])   .controller("ctrl", ["ser", function(ser) {     var vm = this;      ser.getinfo().then(function(response) {       vm.data = response.data;     });   }])   .service("ser", ['$http', function($http) {     this.getinfo = function() {       return $http.get("models/model.json");     };   }]); 

demo