Issue with the Angulare js Controls while Loading the DOM

I am new to Angular Js

I have the angular application.

 And we have the JavaScript files that apply the styles to the controls on the web page.

 Here the html element are loaded first in the Dom.

And the styles from the Java Scripts are applied to those initial controls on the web page.

 But the problem is by the time directive ng-repeat is loaded. The style from Java Scripts are not loading.

Since they have already loaded.

 SO How Can I load the Java script after the angular elements are loaded on the DOM.

And all my scripts are the bottom of the Page.

And here is my Div for 

<div class="col l3 m6 s12" ng-repeat="card in ShoppingCards">
<content class="z-depth-1 open-card">
<div class="front">
<div class="contact-card">
<h2 class="truncate">{{card.Name}}</h2>
<p class="card-company truncate">{{card.Company}}</p>
<p class="card-title truncate">{{card.JobTitle}}</p>
</div>
<div class="information">
<p class="truncate"><i class="fa fa-envelope"></i>Test@gmail.com</p>
<p class="truncate"><i class="fa fa-phone"></i> +99999999</p>
<p class="truncate"><i class="fa fa-mobile"></i> +9999999</p>
</div>
</div>
<div class="back">
<div class="card-left">
<p><b>ACTIONS</b></p>
<p class="truncate"><a href="#">send email</a></p>
<p class="truncate"><a href="#">call on skype</a></p>
</div>
<div class="card-right">
<p class="center-align"><i class="fa fa-hand-pointer-o"></i></p>
<p class="center-align">open card</p>
</div>
</div>
</content>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>-->
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>