title: "TypeError: Cannot call method 'match' of undefined" Morris JS in Angular JS directive
body: <p>I'm trying to make a directive in Angular JS to use a Morris JS graph, here's my code.</p>
  
  <p>I'm getting an error in the console that point me to the "new Morris.Line({" line. What should I do? Thanks.</p>
  
  <pre><code>Reporting.directive('ngMorrison', function() {
      return {
          //require: '^ngModel',
          scope: {
            ngModel: '='
          },
          template: '&lt;div id="call-chart" class="graph"&gt;test&lt;/div&gt;',
          controller: ['$scope', '$http', '$q', function($scope, $http, $q) {
            $scope.getCalls = function() {
              var defer = $q.defer();
              $http({method: 'GET', url: '/dashboard/'}).
                  success(function (data, status, headers, config) {
                      defer.resolve(data);
                  }).error(function (data, status, headers, config) {
                      defer.reject(status);
                  });
              return defer.promise;
            }
          }],
          link: function(scope, iElement, iAttrs, ctrl) {
              calls = scope.getCalls();
              // get list of users
              new Morris.Line({
                // ID of the element in which to draw the chart.
                element: "call-chart",
                // Chart data records -- each entry in this array corresponds to a point on
                // the chart.
                data: [
                  { year: '2008', value: 20 },
                  { year: '2009', value: 10 },
                  { year: '2010', value: 5 },
                  { year: '2011', value: 5 },
                  { year: '2012', value: 20 }
                ],
                // The name of the data record attribute that contains x-values.
                xkey: '{year}',
                // A list of names of data record attributes that contain y-values.
                ykeys: ['value'],
                // Labels for the ykeys -- will be displayed when you hover over the
                // chart.
                labels: ['Value']
              });
          }
      };
  });
  </code></pre>
  
  <p>This is the error I get when looking at the console:</p>
  
  <pre><code>TypeError: Cannot call method 'match' of undefined
      at Object.t.parseDate (eval at &lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), &lt;anonymous&gt;:1:9523)
      at n.eval (eval at &lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), &lt;anonymous&gt;:1:3297)
      at n.t.Grid.r.setData (eval at &lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), &lt;anonymous&gt;:1:3888)
      at n.r (eval at &lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), &lt;anonymous&gt;:1:1680)
      at new n (eval at &lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), &lt;anonymous&gt;:1:11953)
      at link (http://localhost:8000/static/js/app/directives/directives.js:59:23)
      at j (http://localhost:8000/static/js/libs/angular/angular.min.js:43:157)
      at e (http://localhost:8000/static/js/libs/angular/angular.min.js:38:463)
      at e (http://localhost:8000/static/js/libs/angular/angular.min.js:38:480)
      at e (http://localhost:8000/static/js/libs/angular/angular.min.js:38:480) &lt;div ng-morrison="" class="ng-isolate-scope ng-scope"&gt; angular.min.js:61
  </code></pre>