Dynamic Element Angularjs

Question

I'm using a combination of Angular, jQuery and Material Design Lite to develop a dynamic input element insertion by clicking a button in a form and static input in my form (both are working fine). Actually my problem is: the animations of Material Design are working only in Chrome. It works in other browsers like (IE, Edge, MF) only in the first time when I cleared the cache and history of them. The AngularJs script works very well in Chrome, so I guess it's a problem with the other browsers. I have attached the code, scripts and the output from my browsers. Can you help and suggest me the solution for the above problem?

Outputs:

Output from Chrome

Output from other browsers(IE, MF, Edge...)

Here is the Javascript libraries I have used in my file:

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js?i=0990990"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="../js/getmdl-select.min.js?i=0990990"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>

Angularjs code:

var app = angular.module('myApp', ['ngRoute','ngMessages','fieldMatch']);
app.controller('step2', function ($scope, $http,$anchorScroll, $location, $window,anchorSmoothScroll) {
  $scope.message = 'hiiiiiiii';
  $scope.next =function(){
    $location.path( "step3",false);   
  }
  componentHandler.upgradeAllRegistered();
  var ccoun=1;
    $scope.contacts = [0,1];
        $scope.del_cont = function(i){
      console.log(i);
    $scope.contacts.splice(i,1);
  }
        $scope.add_cont = function () {
          $scope.contacts.push({ 
            name:"cv".ccoun,
            lame:"cl".ccoun
          });
        };
        var transform = function(data){
        return $.param(data); 
    }
    $scope.user = {nums:[],ntys:[]};
 $scope.register = function () {
//   $scope.myForm.ccNumber.$setValidity("ccNumber", false);

if ($scope.s2.$invalid) {
    angular.forEach($scope.s2.$error, function (field) {
        angular.forEach(field, function(errorField){
            errorField.$setTouched();
        })
    });
}
    var ccc=angular.element('input.ng-invalid').first().prop('name');

    //angular.element($scope.s2.$invalid)[0].data('id'); 
    anchorSmoothScroll.scrollTo(ccc);


        transclude: true

  }; 
}).run(function($rootScope, $timeout) {
        $rootScope.$on('$viewContentLoaded', function(event) {
                $timeout(function() {
                        componentHandler.upgradeAllRegistered();
                }, 0);
        });
        $rootScope.render = {
                header: true,
                aside: true
        }
});

Mdl code:

        <div class="mdl-grid" ng-repeat="item in contacts">
  <div class="mdl-cell mdl-cell--6-col" >
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
              <input class="mdl-textfield__input" type="text" id="ctty-{{item}}" ng-model="user.ntys[item]" name="ctty-{{item}}"  readonly ng-minlength="5" pattern="[A-Z,a-z, ]*" ng-required="true" />
                <label class="mdl-textfield__label" for="ctty-{{item}}">Type</label>
                <label class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="ctty-{{item}}">
                  <li class="mdl-menu__item" data-val="M">Mobile</li>
                  <li class="mdl-menu__item" data-val="P">Phone</li>
                  <li class="mdl-menu__item" data-val="F">Fax</li>
                </label>
                <span class="mdl-textfield__error" ng-show="s2['ctty-{{item}}'].$touched && s2['ctty-{{item}}'].$invalid">Choose Type</span>
            </div>
              </div>
  <div style="margin-right:0px;width:49%;" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col">

     <input class="mdl-textfield__input mdl-bord" ng-required="true" name="cctn-{{item}}" data-ng-model="user.nums[item]"  type="text" id="cctn-{{item}}">
    <label class="mdl-textfield__label" for="cctn-item">Number</label>
    <span class="mdl-textfield__error" ng-show="s2['cctn-{{item}}'].$touched && s2['cctn-{{item}}'].$invalid">Enter your Number </span>
  </div><label ng-click="del_cont(item)" class="fa fa-times" aria-hidden="true" style="color: red;
    padding-top: 20px;
"></i>
  <script>getmdlSelect.init(".getmdl-select");</script>
  </div>
  <!-- --->
<div align="center"><button ng-click="add_cont()" type="button" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored mdl-js-ripple-effect">
  <span class="fa fa-plus"></span>
</button> Add another Contact...</div>

<!--- ---->



</div>