title: Angular directive unit test issue when passing data into the directive for testing
body: <p>Angular directive unit test issue when passing data into the directive for testing.</p>
  
  <p>I'm having trouble when I pass a data object into the directive.</p>
  
  <p>I get the following error: "<strong>Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object]] starting at [Object]]</strong>"</p>
  
  <p><strong>This is my unit test:</strong></p>
  
  <pre><code>describe("Pagination:", function () {
  
      var element,
        scope,
        mockData,
        rootScope;
  
      beforeEach(angular.mock.module("myApp"));
  
      beforeEach(inject(function ($rootScope, $compile) {
          scope = $rootScope.$new();
  
          //Seems to be an issue here:
          mockData = {
              data: [],
              meta: {},
              links: {}
          };
  
          element = "&lt;pagination data=\"" + mockData + "\"&gt;&lt;/pagination&gt;"; 
          element = $compile(element)(scope);
  
          angular.element(document.body).append(element);
  
          scope.$digest();
      }));           
  
      it("should emit for more data when get data is called", function () {
          sinon.stub(scope, "$emit");
          scope.getData("dummyUrl");
  
          expect(scope.$emit.calledWith("pagination:getTabPage", "dummyUrl")).toEqual(true);
      });
  });
  </code></pre>
  
  <p><strong>The test seems fine.
  Just seems to be an issue with the setup of the test.</strong></p>
  
  <p><strong>This is the html:</strong></p>
  
  <pre><code> &lt;pagination data="data"&gt;&lt;/pagination&gt;
  </code></pre>
  
  <p><strong>This is the directive I'm looking to test:</strong></p>
  
  <pre><code>angular.module("myApp")
      .directive("pagination", [function() {
          return {
              restrict: "E",
              scope: {
                  data: "="
              },
              templateUrl: "pagination.html",
              link: function(scope) {
                  scope.totalPages = scope.data.meta["total-pages"];
  
                  scope.getData = function(pageUrl) {
                      if (pageUrl !== null) {
                          scope.$emit("pagination:getTabPage", pageUrl);
                      }
                  };
              }
          };
  }]);
  </code></pre>