title: Angular IFrame ng-src: Interpolate Error
body: <p>I am trying to embed a Google map inside an <code>iframe</code> using:</p>
  
  <pre><code>&lt;div ng-repeat="event in ctrl.events"&gt;
      &lt;iframe src="{{'https://www.google.com/maps/embed/v1/place?q=(' + event.location.latitude + '%2C' + event.location.longitude + ')&amp;zoom=12&amp;key=API_KEY'}}"&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However I get: </p>
  
  <pre><code>Error: $interpolate:interr Interpolation Error
  </code></pre>
  
  <p>My data set is in the form</p>
  
  <pre><code>$scope.events = 
  [
      { 
          location : { 
              longitude: 1.1,
              latitude: -1.1
          }
      }
  ]
  </code></pre>
  
  <p>What am I doing wrong? I have tried <code>ng-src</code> but I get the same error</p>