using angular and datatables, one implementation shows data while the other does not

Question

so i have a reusable component for making some generic datatables with angular. https://github.com/lostrouter/angular.datatables. however, i found my self constantly repeating my code creating crud views for some lookup entities. so i wanted to make a new angular directive that i could use on pretty much all of these lookup entites. by lookup i mean a simple key-value pair. so i tried to extract what i needed from my generic solution for this directive hoping for a plug and play solution. turns out it's not. i'm pulling my hair trying to figure out why one solution that does essentially the same thing is working and this new idea is not. in the template if i call {{aaData}} i can see that it is getting passed in, and there is data in the object.

controller

angular.element(document).ready(function () {
    "use strict";

    var deptApp = angular.module('deptApp', ['possumLookupCrudTable']);

    function DepartmentCtrl(scope, http) {


        scope.apiUrl = 'api/Departments';
        scope.entityName = 'Department';
        scope.aaData = [];

        http.get(config.root + scope.apiUrl).success(function (result) {
            scope.aaData = result;
        });
    };

    DepartmentCtrl.$inject = ['$scope', '$http'];

    deptApp.controller('DepartmentCtrl', DepartmentCtrl);

    angular.bootstrap(document, ['deptApp']);
});

directive

var lookupCrudDir = angular.module('possumLookupCrudTable', ['resettableForm']);

function possumLookupCrudTable(http) {
    "use strict";

    function controller(scope, $http, $compile) {

        // initilize object used in add/edit modal
        scope.eCurrent = true;

        // data table column definitions
        var columnDefs = [
        { "mData": "Id", "sTitle": "Id", "aTargets": [0], "bVisible": false },
        { "mData": "Name", "sTitle": "Department", "aTargets": [1] },
        { "mData": "Active", "sTitle": "Active", "sWidth": "6em", "aTargets": [2] },
        { "mDataProp": "Id", "aTargets": [3], "sWidth": "5em", "bSortable": false, "mRender": function (data, type, full) {
            return '<a href="" ng-click="editR(' + data + ')"><img src="' + config.root + 'Content/images/icons/file_edit_16x16.png" alt="edit record" title="edit record" /></a>&nbsp;' +
                    '<a href="" ng-click="removeR(' + data + ')"><img src="' + config.root + 'Content/images/icons/file_delete_16x16.png" alt="delete record" title="delete record" /></a>';
        } 
        }];


        // datatable options
        var options = {
            "bStateSave": true,
            "iCookieDuration": 2419200, /* 1 month */
            "bJQueryUI": false,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bDestroy": true,
            "bProcessing": true,
            "aoColumnDefs": columnDefs,
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $compile(nRow)(scope);
            }
        };

        // declare the datatable
        scope.dataTable = angular.element('#lookupTable').dataTable(options);    
    };

    function Link(scope) {

         //watch for any changes to our data, rebuild the DataTable
                scope.$watch(scope.aaData, function (value) {
                    var val = value || null;
                    if (val) {
                        scope.dataTable.fnClearTable();
                        scope.dataTable.fnAddData(scope.aaData);
                    }
                }, true);


// there is code that goes here for handling click events and put/post/delete stuff that is not affecting the solution

        var editTitle = 'Edit ' + scope.entityName;
        var addTitle = 'Add ' + scope.entityName;
    };

    // directive definition object
    var ddo = {
        restrict: 'A',
        templateUrl: config.root + 'AngularTemplate/LookupCrudTable',
        link: Link,
        controller: ['$scope', '$http', '$compile', controller],
        scope: {
            entityName: '=',
            apiUrl: '=',
            aaData: '='
        }
    };

    return ddo;
};

possumLookupCrudTable.$inject = ['$http'];
lookupCrudDir.directive('possumLookupCrudTable', possumLookupCrudTable);

view

<div ng-controller="DepartmentCtrl">
    <div possum-lookup-crud-table entity-name="entityName" api-url="apiUrl" aa-data="aaData">
    </div>
</div>

Answer 1

found the problem. i should be watching attrs.aaData like the generic directive. i don't fully understand why watching the attrs.aaData works while scope.aaData does not.

    // watch for any changes to our data, rebuild the DataTable
    scope.$watch(attrs.aaData, function (value) {
        var val = value || null;
        if (val) {
            scope.dataTable.fnClearTable();
            scope.dataTable.fnAddData(scope.aaData);
        }
    }, true);