title: ng-show with form condition not working on a directive template in AngularJS
body: <p>In the directive I was wondering why the CSS is not reacting accordingly to the attributes. My ng-show is a simple boolean condition that depends if the required error of a certain input is true or not. In short what I want is while the required validation is true the take exam must be hidden until the user inputs something on the textbox</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div id="login-container"&gt;
              &lt;div class="form-group"&gt;
                  &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;form name="loginForm" novalidate&gt;
                  &lt;div class="form-group"&gt;
                    Required condition -- {{ loginForm.student_code.$error.required }}
                      &lt;!-- dasdas -- {{loginForm.student_code.$error.codeValidity  }} --&gt;
                      &lt;br /&gt;
                      &lt;input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required /&gt;
                      &lt;!--&lt;span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity"&gt;{{ errors }}&lt;/span&gt;--&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;login-button form="loginForm"&gt;&lt;/login-button&gt;
              &lt;a href="register"&gt;&lt;button class="btn btn-primary"&gt;Register&lt;/button&gt;&lt;/a&gt;
            &lt;!-- &lt;br /&gt; &lt;strong&gt;A message must be seen after the colon if codeValidity is true: &lt;/strong&gt; --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script&gt;
      var app = angular.module("myApp", []);
  
      app.directive('loginButton', loginButton);
  
      loginButton.$inject = ["$http", "$window"];
  
      function loginButton($http, $window){
          return {
            scope: {
                form: '='
              },
              template: '&lt;button type="button" class="btn btn-primary" ng-show="{{ !form.student_code.$error.required }}" ng-click="click()"&gt;Take Exam&lt;/button&gt;',
              controller: function($scope){
            $scope.click = function(){
              form = $scope.form;
              form.student_code.$setValidity('codeValidity', false);
              $scope.errors = "Code is Invalid";
            };
          }
          }
      }
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the plunker: <a href="https://plnkr.co/edit/plpKSGBtWqQnzhL60OfJ?p=preview" rel="nofollow">https://plnkr.co/edit/plpKSGBtWqQnzhL60OfJ?p=preview</a></p>