title: AngularJS Error: $interpolate:interr Interpolation Error with $routeParams
body: <p>I am trying to load dynamic links from the json to into my iframe template. When I load the iframe page, this error pops up. I don't really know why. This is the first time I've seen this error. Here is the code below.</p>
  
  <p>Controller</p>
  
  <pre><code>app.controller('apps', [
  '$scope', 
  '$http', 
  'contentService',
  'gotoService',
  'getIndex', 
  '$routeParams', function($scope, $http, contentService, gotoService,  getIndex, $routeParams){
   contentService.then(function(data){
      $scope.data = data;   // access all data
      $scope.appsList = $scope.data.appsList;  // list of shortcuts
  
      // change url to links
      $scope.goTo= function(url){
          gotoService.getLink(url);
      }
  
      // get index
      $scope.getIndex = function(index){
          getIndex.current(index);
      }
  
      // embed in iframe
      $scope.link = function(){
          $scope.indexRoute = $routeParams.index;
         return $scope.appsList[$scope.indexRoute].url;
      }
  });
  
  }]);
  </code></pre>
  
  <p>iframe template</p>
  
  <pre><code>&lt;iframe ng-controller="apps" ng-src="{{link()}}" width="800"   height="600"&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>apps icon template</p>
  
  <pre><code>&lt;div class="apps-background" ng-click="goTo(a.link+'/'+$index); getIndex($index);" ng-style="{'background-image':'url({{a.image}})', 'background-repeat': 'no-repeat', 'background-size': 'cover'}"&gt;
  </code></pre>