title: AngularJs assign http response object to scope from html
body: <p>This is the first time I use AngularJs and I would really appreciate some help on this.</p>
  
  <p>I have a json file from which I am retrieving some content that gets displayed on my html template. So far so good.</p>
  
  <p>I need to assign an http response data to the scope from the html.</p>
  
  <p>This is my app</p>
  
  <pre><code>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);
  });
  
  }]);
  </code></pre>
  
  <p>And this is the html</p>
  
  <pre><code>&lt;div class="page" ng-controller="mainController"&gt;
  
      &lt;div id="content" class="chapter"&gt;
  
          &lt;h1&gt;The Icons Update&lt;/h1&gt;
  
          &lt;div ng-init="productId = page[0].acf.spotlight_on"&gt;&lt;/div&gt;
  
          &lt;p&gt;{{ page[0].acf.spotlight_on_title }}&lt;/p&gt;
          &lt;p&gt;{{ page[0].acf.spotlight_on_paragraph }}&lt;/p&gt;
          &lt;img src="{{ page[0].acf.stylist_picture }}" /&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to assign to <code>productId</code> the value of <code>page[0].acf.spotlight_on</code> but need to do it from the html. I just get an undefined value.</p>
  
  <p>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?</p>