After checking out the link provided below, I noticed that in Angular 1.3 they advise against using '$scope.x' inside the controller and instead suggest using 'this.x'
https://docs.angularjs.org/api/ng/directive/ngController
The issue seems to arise when calling $http to retrieve data (which is inherently asynchronous) as the binding doesn't update when a webapi call takes 2.4 seconds.
Even though the webapi call is made and returns data, the information doesn't reflect on the page.
Most examples I've seen utilize the $scope usage pattern. I'm aiming to future-proof my code whenever possible.
Here's the JSON data returned from the service:
[{"Venue":"Index","Symbol":"ADDA.IDX","SecurityId":3320,"Type":"Index","Description":"AMEX Advance Decline Difference"},
{"Venue":"Index","Symbol":"ADDD.IDX","SecurityId":3321,"Type":"Index","Description":"OTC Advance Decline Difference"},
...
Below is the markup:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<body>
<h1>My Test</h1>
<div id="t" ng-controller="SecuritiesController as venue">
<ul>
<li ng-repeat="s in venue.securities">
{{s.SecurityId}} {{s.Symbol}} {{s.Description}}
</li>
</ul>
</div>
<script src="scripts/angular-1.3.js"></script>
<script src="app/controllers/securityController.js"></script>
</body>
</html>
And here's the controller:
angular.module('myApp', []).controller('SecuritiesController', function ($http) {
$http.get("/api/securities").success(function(results)
{ this.securities = results.data; }
);
});