title: How to change template from link function in Angular.js
body: <p>I've created directive <code>widget</code> (which act like ng-view but name of the template is taken from attribute)</p>
  
  <pre><code>app.directive('widget', function() {
      return {
          restrict: 'EA',
          scope: true,
          templateUrl: function(tElement, tAttrs) {
              var page = tAttrs.name + ".html";
              return window.location.href.replace(/[^\/]+$/, '') + page;
          }
      };
  });
  </code></pre>
  
  <p>it work when I create widget like this:</p>
  
  <pre><code>&lt;widget name="page"/&gt;
  </code></pre>
  
  <p>It display page.html. But will not work with this code (I know that it will return 404 while typing until I finish, but it's just an example)</p>
  
  <pre><code>&lt;input ng-model="widgetName"/&gt;
  &lt;widget name="{{widgetName}}"/&gt;
  </code></pre>
  
  <p>In order to have this dynamic widget, I need to create template using link function, how can I do this? I only know that I need to create scope using <code>{name: '@name'}</code> to bind it with attribute name and that I can use $http in link function but don't know what do do when I got the page from it.</p>