title: two way data binding between ng-model and directive
body: <p><strong>Case :</strong></p>
  
  <p>I am trying to watch the change of a select list through a directive then add html based on the selected value but for some reason I am unable to watch the change in the link function . any idea ? thanks</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select ng-model="selected" ng-options="item as item.type for item in itemsList"&gt;&lt;/select&gt;
  
  &lt;d-input type="selected.type"&gt;&lt;/d-input&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>app.directive('dInput', function($compile) {
      return {
          restrict: 'E',
          scope : {
              type : '=',
          } ,
          template : '&lt;div&gt;&lt;/div&gt;',
           link : function (scope, element, attrs) {
              scope.$watch(scope.type, function() {
              var tmplt = '' ;
              if (scope.type == 'input')
                  tmplt = '&lt;input type ="text" name="inputname" value="0"&gt;';
              if (scope.type== 'select')
                  tmplt = '&lt;select &gt;&lt;option&gt; option1&lt;/option&gt;&lt;option&gt;option2&lt;/option&gt;&lt;/select&gt;';
              if (scope.type == 'radio')
                  tmplt = '&lt;input type ="radio" name="inputname" value="0"&gt;';
  
             element.html(tmplt);
             $compile(element.contents())(scope);
  
              });                                   
          },  
      } 
  });
  </code></pre>