title: "Computed Properties" in AngularJS
body: <p>I recently chose AngularJS over ember.js for a project I am working on, and have been very pleased with it so far.  One nice thing about ember is its built in support for "computed properties" with automatic data binding.  I have been able to accomplish something similar in Angular with the code below, but am not sure if it is the best way to do so.</p>
  
  <pre><code>// Controller
  angular.module('mathSkills.controller', [])
    .controller('nav', ['navigation', '$scope', function (navigation, $scope) {
      // "Computed Property"
      $scope.$watch(navigation.getCurrentPageNumber, function(newVal, oldVal, scope) {
        scope.currentPageNumber = newVal;
      });
      $scope.totalPages = navigation.getTotalPages();
    }]);
  
  // 'navigation' service
  angular.module('mathSkills.services', [])
    .factory('navigation', function() {
      var currentPage = 0,
          pages = [];
  
      return {
        getCurrentPageNumber: function() {
          return currentPage + 1;
        },
        getTotalPages: function() {
          return pages.length;
        }
      };
    });
  
  // HTML template
  &lt;div id=problemPager ng-controller=nav&gt;
    Problem {{currentPageNumber}} of {{totalPages}}
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like for the UI to update whenever the <code>currentPage</code> of the <code>navigation</code> service changes, which the above code accomplishes.  </p>
  
  <p>Is this the best way to solve this problem in AngularJS?  Are there (significant) performance implications for using <code>$watch()</code> like this?  Would something like this be better accomplished using custom events and <code>$emit()</code> or <code>$broadcast()</code>?</p>