title: AngularJS Directive binding input
body: <p>When having a variable input type checkbox the value is not set correctly.</p>
  
  <p>This code is simplified in order to get the problem across.</p>
  
  <p><strong>controller.coffee</strong></p>
  
  <pre><code>angular.module 'tinyhandsAmenApp'
  .controller 'TestrouteCtrl', ($scope) -&gt;
    @user =
      admin: true
  </code></pre>
  
  <p><strong>directive.coffee</strong></p>
  
  <pre><code>angular.module 'tinyhandsAmenApp'
  .directive 'formInput', -&gt;
    restrict: 'EA'
    scope:
      model:  '='
    template: '&lt;input ng-model="model" type="{{ type }}"/&gt;'
    link: (scope, element, attrs) -&gt;
      scope.type = "checkbox"
  </code></pre>
  
  <p><strong>example.html</strong></p>
  
  <pre><code>&lt;div class="col-md-12" ng-controller="TestrouteCtrl as tr"&gt;
      &lt;input type="checkbox" ng-model="tr.user.admin" /&gt;
      &lt;form-input model="tr.user.admin"&gt;&lt;/form-input&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The resultant html has <code>value="true"</code> which makes it seem that Angluar is seeing it as a textbox. If I replace <code>{{ type }}</code> with <code>checkbox</code> then it works. Both the input in the directive and out are set correctly.</p>
  
  <p>I also found out if I change the directive html to be</p>
  
  <pre><code>&lt;form-input model="tr.user.admin" type="checkbox"&gt;&lt;/form-input&gt;
  </code></pre>
  
  <p>and the scope object in the directive js to be</p>
  
  <pre><code>scope:
    model: '='
    type:  '@'
  </code></pre>
  
  <p>and remove the <code>scope.type = "checkbox"</code> from the link function it works!</p>
  
  <p>So it is seeming like Angluar is setting the value of the input element with ng-model BEFORE link is being called. Does that make sense?</p>
  
  <p>I suppose this solution is good enough for now but I would REALLY like to be able to specify the input type from the js.</p>
  
  <p>By the way, the way I had it originally works fine if type is text.</p>
  
  <p><strong>UPDATE:</strong> Here is a <a href="http://jsfiddle.net/adamk33n3r/6d4sf8zz/3/" rel="nofollow">JSFiddle</a> that shows what I am talking about. <code>form-input</code> doesn't work. <code>form-input2</code> does but using the type attribute on the directive in the html.</p>
  
  <p><strong>UPDATE2:</strong> What I want to be able to do is specify the input type in the javascript and have the binding to the controller work.</p>