Bootstrap 3 + AngularJS - Modal example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<body>
<div style="margin: 1em;">

<div ng-controller="BugController as $ctrl" ng-init="$ctrl.$onInit">
<h3>With $timeout, ng-invalid class is not set (form.$valid = {{$ctrl.form.$valid | json}})</h3>
<form name="$ctrl.form">
  <div class="form-group" ng-if="$ctrl.hasEmail">
    <input class="form-control" type="{{$ctrl.type}}"  ng-model="$ctrl.Email" name="email_input"/>
  </div>
</form>
</div>

<div ng-controller="WorkingController as $ctrl">
<h3>Without $timeout, ng-invalid class is set (form.$valid = {{$ctrl.form.$valid | json}})</h3>
<form name="$ctrl.form">
  <div class="form-group" ng-if="$ctrl.hasEmail">
    <input class="form-control" type="{{$ctrl.type}}"  ng-model="$ctrl.Email" name="email_input"/>
  </div>
</form>
</div>
</div>
  
</body>

CSS

.ng-invalid,
.ng-invalid:focus{
  border-color: red;
}

JavaScript

angular.module('app', []);


angular.module("app").controller("BugController", ['$timeout', BugController]);

function BugController($timeout) {
		this.hasEmail = true;
  	this.Email = 'test.invalid';
        
  	this.$onInit = function(){
      var self = this;
      $timeout(function () {
        self.type = 'email';
      });
    }
}

angular.module("app").controller("WorkingController", WorkingController);

function WorkingController() {
		 this.hasEmail = true;
        this.Email = 'test.invalid';
        
        this.$onInit = function(){
        var self = this;
        self.type = 'email';
     }
}