title: Data changes in the $scope but not updating within a directive in AngularJS
body: <p>I have the following directive:</p>
  
  <pre><code>'use strict';
  angular
   .module('rdash')
   .directive('rdWidgetBody', function(){
      var directive = {
          requires: '^rdWidget',
          scope: {
              loading: '@?',
              classes: '@?', 
              query: '@?'
          },
          transclude: true,
          template: '&lt;div class="widget-body" ng-class="classes"&gt;&lt;rd-loading ng-show="loading"&gt;&lt;/rd-loading&gt;&lt;div ng-hide="loading" class="widget-content" ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;',
          restrict: 'E'
      };
      return directive;
  });
  </code></pre>
  
  <p>Which I'm using this in my scope, I have a property $scope.total_apps which is changing in the controller, but not updating in the view</p>
  
  <p>Can anyone help me to make sure that I can have two way data binding?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="row" data-ng-controller="AdminsController"&gt;
      &lt;div class="col-lg-3 col-md-6 col-xs-12"&gt;
          &lt;rd-widget&gt;
          &lt;rd-widget-body&gt;
              &lt;div class="widget-icon green pull-left"&gt;
                  &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="title"&gt;{{total_apps}}&lt;/div&gt;//Not updating after changed somewhere else.
              &lt;div class="comment"&gt;Appointments&lt;/div&gt;
          &lt;/rd-widget-body&gt;
          &lt;/rd-widget&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT - code modifying total_apps - (within AdminsController)</p>
  
  <pre><code>$scope.appointmentsGetter = function(app_query){
  
              Appointments.query(app_query).$promise.then(function(res){
                  $scope.appointments = res;
                  $scope.total_apps = $scope.appointments.length; 
  
              });
          };
  </code></pre>