Data changes in the $scope but not updating within a directive in AngularJS

Question

I have the following directive:

'use strict';
angular
 .module('rdash')
 .directive('rdWidgetBody', function(){
    var directive = {
        requires: '^rdWidget',
        scope: {
            loading: '@?',
            classes: '@?', 
            query: '@?'
        },
        transclude: true,
        template: '<div class="widget-body" ng-class="classes"><rd-loading ng-show="loading"></rd-loading><div ng-hide="loading" class="widget-content" ng-transclude></div></div>',
        restrict: 'E'
    };
    return directive;
});

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

Can anyone help me to make sure that I can have two way data binding?

Here is the code:

<div class="row" data-ng-controller="AdminsController">
    <div class="col-lg-3 col-md-6 col-xs-12">
        <rd-widget>
        <rd-widget-body>
            <div class="widget-icon green pull-left">
                <i class="fa fa-calendar"></i>
            </div>
            <div class="title">{{total_apps}}</div>//Not updating after changed somewhere else.
            <div class="comment">Appointments</div>
        </rd-widget-body>
        </rd-widget>
    </div>
</div>

EDIT - code modifying total_apps - (within AdminsController)

$scope.appointmentsGetter = function(app_query){

            Appointments.query(app_query).$promise.then(function(res){
                $scope.appointments = res;
                $scope.total_apps = $scope.appointments.length; 

            });
        };

Answer 1

Because your directive has an isolate scope the {{total_apps}} property you have inside of your <rd-widget-body></rd-widget-body> markup is actually in a different part of the scope than the one you are updating. Try {{ $parent.total_apps }} to access the property in the parent scope.

My answer assumes you are settings total_apps in a controller and that scope is the parent.