title: How to get the value of a custom attribute in angular js
body: <p>I have created a custom attribute called <code>test</code> in angular js. When I write the <code>test</code> attribute just beside the ng-controller keyword i.d. </p>
  
  <p><code>&lt;div ng-controller="myCon" test="abc"&gt;&lt;/div&gt;</code> then I can access that <code>test</code> from the controller by using <code>alert($attrs.test)</code>. But if I write the custom attribute <code>test</code> other than beside of the ng-controller keyword, I can't access that. i.e. </p>
  
  <p><code>&lt;div ng-controller="myCon"&gt;
     &lt;div test="def"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></p>
  
  <p>In this case I got <strong><em>undefined</em></strong> in <code>alert($attrs.test)</code></p>
  
  <p>Full code...</p>
  
  <pre><code>&lt;html&gt;
  &lt;script src="angular.min.js"&gt;&lt;/script&gt;
  &lt;body ng-app="myApp"&gt;
  
  &lt;div ng-controller="kumar" &gt;
   &lt;button ng-click="check()" test="def"&gt;Click&lt;/button&gt;
  &lt;/div&gt;
  
   &lt;script&gt;
   var app = angular.module("myApp", []);
   app.directive("test", function() {
    return {
      //template : "&lt;h1&gt;Hello&lt;/h1&gt;"
    };
  });
  
   app.controller("kumar",function($scope,$attrs){
      $scope.check=function(){
        alert(JSON.stringify($attrs.test));   //getting undefined. I 
                        //should get def.
    }
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>