title: Directive's link is not rendering variable in the scope
body: <p>I'm expecting the directive to print the template with the values inside <code>{{  }}</code> resolved, but it's not. It's printing out <code>{{argVal}}</code> as if it's a literal piece of HTML string.</p>
  
  <pre><code>myApp.directive('myArgs', [function() {
  
      var theTemplate = 
          '&lt;span&gt;{&lt;/span&gt;' + 
              '&lt;div ng-if="typeIsArray(argVal)"&gt;'+
                  '&lt;p&gt;{{argVal}}&lt;/p&gt;'
                  '&lt;my-args arg-val="argVal[0]"&gt;&lt;/my-args&gt;'
              '&lt;/div&gt;';
  
      return {
          restrict: "E",
          scope: {
              argVal: '='
          },
          controller: ... //contains utils to check type of argVal
          link: function(scope, element){
              alert(scope.argVal);
              element.html('').append(theTemplate);
          }
        };        
  }]);
  </code></pre>
  
  <p>In my HTML file, I'm simply calling the directive like this:</p>
  
  <pre><code>&lt;my-args arg-val="someArray"&gt;&lt;/my-args&gt; 
  </code></pre>
  
  <p>(<code>someArray</code> is defined in the controller as <code>$scope.someArray = ["ola", "hi", "bonjour"];</code>)</p>
  
  <p><code>someArray</code> is definitely in the scope because the <code>alert(someArray)</code> is working.</p>
  
  <p>So why won't the template portion render properly?</p>