Why won't my view template bind to a scope variable with AngularJS?

Question

My view is:

<div class="container" ng-controller="MyController">
  <div class="row">
    <div class="col-md-8">
      <textarea class="form-control" rows="10" ng-model="myWords" ng-change="parseLanguage()"></textarea>
    </div>
    <div class="col-md-4" ng-show="sourceLanguage !== null">
      Language: {{ sourceLanguage }}
    </div>
  </div>
</div>

My controller is:

webApp.controller('MyController', [
  '$scope', '$rootScope', 'TranslateService', function($scope, $rootScope, CodeService) {
    $scope.init = function() {
      return $scope.sourceLanguage = null;
    };
    $scope.parseLanguage = function() {
      return TranslateService.detectLanguage($scope.myWords).then(function(response) {
        console.log($scope.sourceLanguage);
        $scope.sourceLanguage = response.data.sourceLanguage;
        return console.log($scope.sourceLanguage);
      });
    };
    return $scope.init();
  }
]);

The console logs show the right data. But in the view, sourceLanguage never updates. Why would this be?

Answer 1

In case the promise you are evaluating is not part of the Angular context you need to use $scope.$apply:

$scope.parseLanguage = function() {
  TranslateService.detectLanguage($scope.myWords).then(function(response) {
    $scope.$apply(function() {
      $scope.sourceLanguage = response.data.sourceLanguage;    
    });        
  });
};