Angular JS - "Error: [$interpolate:interr] Can't interpolate:" when using Highcharts

Question

I'm trying to add a directive to my app, check out the demo here:

http://plnkr.co/edit/XlmS8wIuyrwYXXaXbdPr?p=preview

The code renders on the browser (Chrome 33) but the console still throws the error:

Error: [$interpolate:interr] Can't interpolate:{{example_chart}}
TypeError: Converting circular structure to JSON

Anyone know why the console throws errors while still having everything else goes successfully? Just trying to understand the "why" even though the code seems to work.

Here is the JS:

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1")

  $stateProvider
    .state('route1', {
        url: "/route1",
        templateUrl: "route1.html"
    })
      .state('route1.list', {
          url: "/list",
          templateUrl: "route1.list.html",
          controller: function($scope){
            $scope.items = ["A", "List", "Of", "Items"];
          }
      })

    .state('route2', {
        url: "/route2",
        templateUrl: "route2.html"
    })
      .state('route2.list', {
          url: "/list",
          templateUrl: "route2.list.html",
          controller: function($scope){
            $scope.things = ["A", "Set", "Of", "Things"];
          }
      })
})
myapp.directive('highchart', function () {
  return {
      restrict: 'E',
      template: '<div></div>',
      replace: true,

      link: function (scope, element, attrs) {

          scope.$watch(function() { return attrs.chart; }, function() {

            if(!attrs.chart) return;

            var chart = scope.example_chart;

            element.highcharts(chart);

          });

      }
  };
});

function get_chart() {
    return {
       xAxis: {
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },

       plotOptions: {
         series: {
             cursor: 'pointer',
             point: {
                 events: {
                     click: function() {
                         alert ('Category: '+ this.category +', value: '+ this.y);
                     }
                 }
             }
         }
       },

       series: [{
           data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
       }]
     };
}

function Ctrl($scope) {
   $scope.example_chart = get_chart();
}

And HTML:

<div ng-controller="Ctrl">
     <highchart chart='{{example_chart}}'></highchart>
  </div>

Solution

Just do

<highchart chart='example_chart'></highchart>

This will pass in the object instead of interpolated string.