title: Model not updating after REST API call
body: <p>I'm new to AngularJS and have been playing around with it to get to grips with it. I've been getting to grips with <code>$scope</code> within a controller and how its used as the context between the view and the model. I'm also getting to grips with Promises and async web calls.</p>
  
  <p>However, I've reworked an incredibly simple project to use <code>this</code> instead of <code>$scope</code> within the controller and not pass in the <code>$scope</code> object. </p>
  
  <p>However, where I am making an async call to fetch a JSON file to load the variable <code>usdToForeignRates</code>, the view never seems to update. All the other properties work. Any ideas what I'm doing wrong?</p>
  
  <p>NOTE: I can get the view to update, if I change <code>this.usdToForeignRates</code> to be <code>$scope.usdToForeignRate</code>s, pass in the scope to the controller and then just change <code>index.html</code> to reference <code>usdToForeignRates</code> rather than <code>invoice.usdToForeignRates</code>.</p>
  
  <p>controllers.js:-</p>
  
  <pre><code>var financeApp = angular.module('financeApp', []);
  financeApp.controller('invoiceController', ['$http', function($http) {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = ['USD', 'EUR', 'CNY'];
  this.usdToForeignRates = [];
  this.counter = 1;
  
  loadRates();
  function loadRates(){
      $http.get('rates/rates.json').then(function(rates)
      {
          this.usdToForeignRates = rates.data;
      });};
  
  this.add = function () {
      this.counter = this.counter + 1;
  };
  
  this.getRate = function getRate(curr){
      return this.usdToForeignRates[curr];
  };
  
  this.total = function total(outCurr) {
      var result = this.qty * this.cost * this.usdToForeignRates[outCurr] / this.usdToForeignRates[$scope.inCurr];
      return result;
  };
  this.pay = function pay() {
      window.alert("Paid!");
  };
  }]);
  </code></pre>
  
  <p>index.html:-</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="controllers.js"&gt;&lt;/script&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Currency Service&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div ng-app="financeApp" ng-controller="invoiceController as invoice"&gt;
  &lt;div&gt;
      &lt;select ng-model="invoice.inCurr"&gt;
          &lt;option ng-repeat="c in invoice.currencies"&gt;{{c}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="c in invoice.currencies"&gt;{{c + ' ' + getRate(c) + 'rate'}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="r in invoice.usdToForeignRates"&gt;{{r}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;button ng-click="invoice.add()"&gt;Add&lt;/button&gt;
  &lt;div ng-model="invoice.counter"&gt;{{invoice.counter}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>