title: AngularJS : Directive not picking up attribute
body: <p>I have got the following directive:</p>
  
  <pre><code>app.directive('ngAvatar', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '&lt;img class="avatar-medium" ng-src="{{url}}" /&gt;',
      link: function(scope, elem, attrs) {
        console.log(attrs);
        var aType = attrs.avatarType;
        var aId = attrs.avatarId;
        console.log("Type: "+ aType);
        console.log("Character ID:"+ aId);
        var baseUrl = "http://api-character.com/";
        switch(aType){
          case "character":
            scope.url = baseUrl + "Character/"+aId+"_256.jpg";
        }
      }
    }
  });
  </code></pre>
  
  <p></p>
  
  <p>Unfortunately the directive is not picking up the avatar_id inside of the directive.  As you can see I am console logging the attributes:</p>
  
  <pre><code>console.log("Type: "+ aType);
  console.log("Character ID:"+ aId);
  </code></pre>
  
  <p>In my view I am using this directive like so:</p>
  
  <pre><code>&lt;ng-avatar avatar_type="character" avatar_id="{{character.character_id}}"&gt;&lt;/ng-avatar&gt;
  </code></pre>
  
  <p>The following is the output of my console in Chrome.  As you can see the avatar_id is showing as blank but on inspection of the <code>attrs</code> you can see that the attribute is there but just not showing in the directive code.</p>
  
  <p>Chrome Console:</p>
  
  <p><img src="https://i.stack.imgur.com/eR5OG.png" alt="enter image description here"></p>
  
  <p>Does anyone have any idea why it would not work?</p>
  
  <p>Thanks</p>