title: How to pass custom directive name dynamically in class attribute of div tag?
body: <p>I am very new to AngularJS. I have made a custom directive <code>user</code> and I want to call it dynamically in class attribute by using a variable.
  e.g. <code>$scope.dirName = "user";</code>
  When i use this variable in below code:</p>
  
  <pre><code>&lt;div class = {{dirName}}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Its result must show two input fields with specified values. But it is not doing so. When I replace <code>{{dirName}}</code> with <code>user</code>. It is working fine, means two input fields are shown with values as specified. Can anybody tell, what mistake I am doing?</p>
  
  <p>This is index.html</p>
  
  <pre><code>&lt;div ng-controller = "Ctrl"&gt;
  &lt;form name = "myForm"&gt;
    &lt;div class = {{dirName}}&gt;&lt;/div&gt;
    &lt;hr&gt;
    &lt;tt&gt;userName : {{user}}&lt;/tt&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is script.js</p>
  
  <pre><code>&lt;pre&gt;var app = angular.module('App',[]);
  
  app.controller('Ctrl', function($scope){
   $scope.user = {name:'adya',last:'Rajput'};
   $scope.dirName = "user";
  });
  
  app.directive('user',function(){
   return{
     restrict:'C',
     templateUrl:'template.html'
   };
  });&lt;/pre&gt;
  </code></pre>
  
  <p>template.html contains:</p>
  
  <pre><code>UserName : &lt;input type='text' name='userName' ng-model='user.name' required&gt;
  LastName : &lt;input type='text' name='lastName' ng-model='user.last'&gt;
  </code></pre>