title: Passing Array of Objects into Angular Directive
body: <p>I have an array of objects in my angular controller, e.g.</p>
  
  <pre><code>[{
     label: 'label1',
     data: [{
               type: TimelineChart.TYPE.POINT,
               at: new Date([2015, 1, 1])
             }, {
               type: TimelineChart.TYPE.POINT,
               at: new Date([2015, 2, 1])
           }]
   }, {
     label: 'label2',
     data: [{
               type: TimelineChart.TYPE.POINT,
               at: new Date([2015, 1, 11])
           }, {
               type: TimelineChart.TYPE.POINT,
               at: new Date([2015, 1, 15])
           }]
   }];
  </code></pre>
  
  <p>Every object has a <code>Date</code> field. How can I pass this array of objects into my directive?</p>
  
  <p>I tried passing by reference:</p>
  
  <pre><code>&lt;div id= "chart" my-directive my-data="data"&gt;&lt;/div&gt;
  $scope: {
            myData: '='
          },
  link: function($scope, $element, $attrs) {
          function init() {
            var data = $scope.myData;
            var timeline = new TimelineChart($element[0], data);
          }
  
          $attrs.$observe("myData", init);
        }
  </code></pre>
  
  <p>However, it didn't work. I get <code>undefined</code>.</p>
  
  <p>Passing in as an attribute, i.e. <code>my-data="{{ data }}"</code> and using <code>JSON.parse($attrs.myData)</code> does not work due to the <code>Date</code> fields.</p>