пользовательский интерфейс с пользовательской директивой

Question

Я пытаюсь создать пользовательскую директиву для генерации динамической пользовательской сетки, но у меня есть некоторая проблема, потому что я получаю сообщение об ошибке «Невозможно прочитать свойство« данные »из неопределенного» рядом со строкой данных: scope.options.data =

Ниже мой угловой код:

angular.module('plugins.controller').controller('DEMOTESTCtrl', ['$scope', 'DEMOTEST', function ($scope, DEMOTEST) {

    var all = this;
    all.myData = [
        {
            "firstName": "Cox",
            "lastName": "Carney",
            "company": "Enormo",
            "employed": true
        },
        {
            "firstName": "Lorraine",
            "lastName": "Wise",
            "company": "Comveyer",
            "employed": false
        },
    ];

    all.firstOptions = {
        data: all.myData,
    };

}]).directive('myGrid', function(){
    return {
        templateUrl : 'grid.html',
    controller : 'DEMOTESTCtrl',
    controllerAs : 'grid',
    restrict: 'E',
    scope: {
      options : '=',
    },
    bindToController: true,
    link: function(scope, element, attrs) {

        var defaultColDef = [
              {field: 'firstName'},
              {field: 'lastName'},
              {field: 'company'},
              {field: 'employed'}
        ];

        scope.gridOptions = {
          data: scope.options.data, //private scoped from options : '=',
          columnDefs: scope.options.colDef || defaultColDef, // optional setting or default setting
          // ... some more default data
        };
      }
  };
});

И мой HTML-код

<div ng-controller="DEMOTESTCtrl as all">
<my-grid options="all.firstOptions" class="grid"></my-grid>
</div>

<script type="text/ng-template" id="grid.html" style="width: 1000px"> 
<div class="grid" ui-grid="gridOptions">
</div>
</script>
<link rel="stylesheet" href="./Scripts/plugins/DEMOTEST/DEMOTEST.css">

Как я могу решить эту проблему?