title: Adding a new data model to Malhar-Angular-Dashboard
body: <p>Im' working on the Malhar Angular Dashboard, based on this github project <a href="https://github.com/DataTorrent/malhar-angular-dashboard" rel="nofollow">https://github.com/DataTorrent/malhar-angular-dashboard</a>.</p>
  
  <p>As per the documentation in the link post just above, under the 'dataModelType' heading 1/2 way down:</p>
  
  <pre><code>`The best way to provide data to a widget is to specify a dataModelType in the Widget Definition Object (above). This function is used as a constructor whenever a new widget is instantiated on the page.`
  </code></pre>
  
  <p>And when setting up the Widget Definition Objects, there are various options to choose from :</p>
  
  <p><code>templateUrl -  URL of template to use for widget content</code></p>
  
  <p><code>template   -   String template (ignored if templateUrl is present)</code></p>
  
  <p><code>directive  -   HTML-injectable directive name (eg. "ng-show")</code></p>
  
  <p>So when I add my own widget definition <code>column chart</code>, I attempt to use the 'template' option; however it does NOT inject the {{value}} scope variable I'm setting.</p>
  
  <p>Using the original <code>datamodel</code> sample widget def, it works fine using the 'directive' option. If I mimic this method on my <code>column chart</code> definition then it works ! But it doesn't work using the template option. </p>
  
  <p>Here's the 'widgetDefinitions' factory code :</p>
  
  <pre><code>  (function () {
  'use strict';
  angular.module('rage')
      .factory('widgetDefinitions', ['RandomDataModel','GadgetDataModel',  widgetDefinitions])
  
  function widgetDefinitions(RandomDataModel, GadgetDataModel) {
      return [          
        {
            name: 'datamodel',
            directive: 'wt-scope-watch',
            dataAttrName: 'value',
            dataModelType: RandomDataModel    // GOTTA FIGURE THIS OUT !! -BM:
        },
        {
            name: 'column chart',
            title: 'Column Chart',
            template: '&lt;div&gt;Chart Gadget Here {{value}}&lt;/div&gt;',            
            dataAttrName: 'value',  
            size: {width: '40%',height: '200px'},
            dataModelType: ColumnChartDataModel
        },
      ];
  }       
   })();
  </code></pre>
  
  <p>and here are the factories:</p>
  
  <pre><code>'use strict';
  
  angular.module('rage')
    .factory('TreeGridDataModel', function (WidgetDataModel, gadgetInitService) {
        function TreeGridDataModel() {
        }
  
        TreeGridDataModel.prototype = Object.create(WidgetDataModel.prototype);
        TreeGridDataModel.prototype.constructor = WidgetDataModel;
  
        angular.extend(TreeGridDataModel.prototype, {
            init: function () {
                var dataModelOptions = this.dataModelOptions;
                this.limit = (dataModelOptions &amp;&amp; dataModelOptions.limit) ? dataModelOptions.limit : 100;
                this.treeGridActive = true;
                //this.treeGridOptions = {};
                this.updateScope('THIS IS A TreeGridDataModel...');  // see WidgetDataModel factory           
            },
  
            updateLimit: function (limit) {
                this.dataModelOptions = this.dataModelOptions ? this.dataModelOptions : {};
                this.dataModelOptions.limit = limit;
                this.limit = limit;
            },
  
            destroy: function () {
                WidgetDataModel.prototype.destroy.call(this);             
            }
        });
  
        return TreeGridDataModel;
    });
  
  'use strict';
  
  angular.module('rage')
    .factory('ColumnChartDataModel', function (WidgetDataModel) {
        function ColumnChartDataModel() {
        }
  
        ColumnChartDataModel.prototype = Object.create(WidgetDataModel.prototype);
        ColumnChartDataModel.prototype.constructor = WidgetDataModel;
  
        angular.extend(ColumnChartDataModel.prototype, {
            init: function () {
                var dataModelOptions = this.dataModelOptions;
                this.limit = (dataModelOptions &amp;&amp; dataModelOptions.limit) ? dataModelOptions.limit : 100;
                this.treeGridActive = true;
                var value = 'THIS IS A ColChartDataModel...';
                //$scope.value = value;
                this.updateScope(value);  // see WidgetDataModel factory           
            },
  
            updateLimit: function (limit) {
                this.dataModelOptions = this.dataModelOptions ? this.dataModelOptions : {};
                this.dataModelOptions.limit = limit;
                this.limit = limit;
            },
  
            destroy: function () {
                WidgetDataModel.prototype.destroy.call(this);
            }
        });
  
        return ColumnChartDataModel;
    });
  </code></pre>
  
  <p>and finally the directives:</p>
  
  <pre><code>'use strict';
  
  angular.module('rage')
    .directive('wtTime', function ($interval) {
      return {
        restrict: 'A',
        scope: true,
        replace: true,
        template: '&lt;div&gt;Time&lt;div class="alert alert-success"&gt;{{time}}&lt;/div&gt;&lt;/div&gt;',
        link: function (scope) {
          function update() {
            scope.time = new Date().toLocaleTimeString();
          }
  
          update();
  
          var promise = $interval(update, 500);
  
          scope.$on('$destroy', function () {
            $interval.cancel(promise);
          });
        }
      };
    })
    .directive('wtScopeWatch', function () {
      return {
        restrict: 'A',
        replace: true,
        template: '&lt;div&gt;Value&lt;div class="alert alert-info"&gt;{{value}}&lt;/div&gt;&lt;/div&gt;',
        scope: {
          value: '=value'
        }
      };
    })
    .directive('wtFluid', function () {
      return {
        restrict: 'A',
        replace: true,
        templateUrl: 'app/views/template2/fluid.html',
        scope: true,
        controller: function ($scope) {
          $scope.$on('widgetResized', function (event, size) {
            $scope.width = size.width || $scope.width;
            $scope.height = size.height || $scope.height;
          });
        }
      };
    });
  </code></pre>
  
  <p>I'd like to know why ONLY the directive option will update the wigdet's data and not the template option.</p>
  
  <p>thank you,
  Bob</p>