AngularJs assign http response object to scope from html - html

Question

This is the first time I use AngularJs and I would really appreciate some help on this.
I have a json file from which I am retrieving some content that gets displayed on my html template. So far so good.
I need to assign an http response data to the scope from the html.
This is my app
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainController', ['$scope', '$filter', '$http', '$log', function($scope, $filter, $http, $log) {
$scope.url = "myurl";
$http.get($scope.url)
.success(function(result) {
$scope.page = result;
})
.error(function(data, status) {
$log.info(data);
});
$scope.$watch('productId', function () {
$log.info($scope.productId);
});
}]);
And this is the html
<div class="page" ng-controller="mainController">
<div id="content" class="chapter">
<h1>The Icons Update</h1>
<div ng-init="productId = page[0].acf.spotlight_on"></div>
<p>{{ page[0].acf.spotlight_on_title }}</p>
<p>{{ page[0].acf.spotlight_on_paragraph }}</p>
<img src="{{ page[0].acf.stylist_picture }}" />
</div>
</div>
I need to assign to productId the value of page[0].acf.spotlight_on but need to do it from the html. I just get an undefined value.
Am I right to use ng-init on a div or should I use a different approach? Is there a different way to achieve what I need?

Answer 1

My understanding is that ng-init cannot be used to set scope values after a promise is resolved, which is what is happening when the value is set from $http.get. See angular docs for ngInit https://docs.angularjs.org/api/ng/directive/ngInit
In your question you say you need to set the value of productId in the html, however this appears impossible where it is returned by a promise.
The alternative is very simple to do in the controller by simply using the following:
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainController',
['$scope', '$filter', '$http', '$log',
function($scope, $filter, $http, $log) {
$scope.page = {};
$scope.productId = '';
$scope.url = "myurl";
$http.get($scope.url)
.success(function(result) {
$scope.page = result;
// set the value of productId from the result
$scope.productId = result[0].acf.spotlight_on;
})
.error(function(data, status) {
$log.info(data);
});
}]);

Answer 2

If you use ng-init, then it creates a scope variable which is only limited to the element(and its children) where you have defined it. In other words, it won't be available in your controller which is why you get 'undefined'.
To tackle this, you can use $parent, which will create the scope variable in your controller:
ng-init="$parent.productId = page[0].acf.spotlight_on"