Using AngularJS to load AJAX content and ng-repeat to generate a list of items. I have a placeholder {{noun}} in the content, expecting it to be replaced with data from $scope.noun when the AJAX content is loaded. However, this does not happen automatically. Is there a quick and easy way to achieve this?
Below is the code snippet:
AllControllers.controller('AppController', ['$scope', '$http', function ($scope, $http) {
$scope.noun = "My Noun";
$scope.headlines = [{
headline: "Top 10 Tricks to {{noun}}",
usage: 10,
votes: 100
}];
$scope.load_headlines = function() {
$http.get('/data/headlines.json').
success(function(data, status, headers, config){
$scope.headlines = data;
}).
error(function(data, status, headers, config){
console.log(status);
});
};
}]);
<div ng-controller="AppController" ng-init="load_headlines()">
<table>
<tbody ng-repeat="headline in headlines">
<tr>
<td>{{headline.headline}}</td>
<td class="center">{{headline.usage}}</td>
<td class="center">{{headline.votes}}</td>
</tr>
</tbody>
</table>
</div>