title: AngularJS dynamic iframe on click
body: <p>I have an input box and I need to load a url that is being typed in the input. Then once the button is clicked, I need the iframe to load the page. I tried add $sce in the controller, and it works if its hard coded only. Here is the code I have so far. </p>
  
  <p>input box with button</p>
  
  <pre><code>    &lt;input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" ng-model="url" /&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-primary btn-lg" type="button" ng-click="go(url)"&gt;Go!&lt;/button&gt;
           &lt;/span&gt;
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>app.controller('browser', [
  '$scope',
  '$http',
  'contentService',
  'arrayService',
  'ngAudio',
  '$sce',
  function($scope, $http, contentService, arrayService, ngAudio, $sce) {
      contentService.then(function(data) {
          $scope.data = data; // access all data
          $scope.links = $sce.trustAsResourceUrl("http://www.yelp.com/");
  
          $scope.go = function(url){
             $scope.links = url;
             console.log('links', $scope.links);
              return $scope.links;
          };
  
  
          });
      }
  ]);
  </code></pre>