title: Repeated element on AngularJS directive scope raising TypeError: Converting circular structure to JSON
body: <p>I am getting a strange error that is breaking the idea that I had. Basically I want that a directive with access to two elements, a list of Charts and one specific Chart that it is contained in the former list. Considerating the AngularJS way of data binding and my lazyness I decided to pass 2 arrays, the first one would be the list of Charts and the second one could have zero elements or <strong>only</strong> one element (the selected to be the active).</p>
  
  <p>So here is the directive declaration (datatable and dimensions are used for other things and are working fine):</p>
  
  <pre><code>app.directive("viscMiddleSection", function ($timeout) {
  return {
      restrict: "AEC",
      scope: { chartarray: "=", datatable: "=", dimensionsinuse: "=", activechart: "=" },
      templateUrl: "components/middlesection/templates/middle_section.html",
  ...
  </code></pre>
  
  <p>In the service I have the two arrays:</p>
  
  <pre><code>app.service('metaDataService', function ($rootScope, $q, dataHtmlService) {
  this.activeChartMetadata = [];
  this.chartMetadatas = [];
  ...
  </code></pre>
  
  <p>And in the controller I get those arrays using getter methods that simply return the arrays citated before:</p>
  
  <pre><code>app.controller('GraphController', ['$scope', 'dataService', 'metaDataService', 
  function ($scope, dataService, metaDataService) {
      $scope.chartMetadatas = metaDataService.getChartMetadatas();
      $scope.activeChartMetadata = metaDataService.getActiveChartMetadata();
  ...
  </code></pre>
  
  <p>Finally I bind all in the html file:</p>
  
  <pre><code>&lt;div visc-middle-section chartarray=chartMetadatas 
    datatable=dataTable dimensionsinuse=dimensionsInUse activechart=activeChartMetadata&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I try this way that I explained I got the following exception while rendering the template html file:</p>
  
  <blockquote>
    <p>Error: [$interpolate:interr] Can't interpolate:       {{activechart}}
    TypeError: Converting circular structure to JSON</p>
  </blockquote>
  
  <p>Strangely this error only occurs when I pass the chart's object reference to the directive, if I change the 'metaDataService.getActiveChartMetadata()' function to return a number or only the name of the selected chart everything works fine. What am I doing wrong here? I don't see any circular reference in my data, only a repeated object. In my head my scope is this way, without circular references:</p>
  
  <p>scope: { chartarray: [ column_chart_obj, table_chart_obj, pie_chart_obj ], activechart:[pie_chart_obj], ...}</p>
  
  <p>Can someone help me? I really don't want to pass the reference string, since this way I would have to find the chart inside the array of charts in every other directive instead of doing this only one time. Thanks and sorry about the English mistakes.</p>