How do I initialize materalizecss in angular - angularjs

Question

So the title kinda says it all...
I want to use a materialize modal created by angular, only problem I got is it won't initialize correctly. Someone got a sollution?
The angular that gives me an object with values.
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
});
The HTML where I use the modal from materalizecss
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Add Item to list: <!--list name hier--></h4>
<form>
<div class="row">
<div class="input-field col s12">
<label for="item-name">Item Name</label>
<input type="text" name="item-name" ng-model="itemName" id="item-name">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="item-description">Item Description</label>
<input type="text" name="item-description" ng-model="itemDescription" id="item-description">
</div>
</div>
</form>
</div>
<div class="modal-footer">
Add item
</div>
</div>
getList.php
$smt = $dbh->prepare("SELECT lists.name, lists.description, lists.deadline, lists.id FROM users INNER JOIN lists ON (users.id = lists.user_id) AND users.id = ?");
$smt->execute(array(
$user
));
$result = $smt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($result);
print_r($json);

Answer 1

All you need to do is:
First:
Add this script to controller, to initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
Example:
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
//initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
}]);
Next: (Optional)
Use this line if you want to call the model programmatically
$('#modal1').modal('open'); //when you want to open modals programatically
Example:
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
$('#modal1').modal('open');
});
Next: (Optional)
Use "data-target" if you want to display modal on button click.. when using "ng-route" because href won't work because it will affect the ng-route and simply start redirecting pages
data-target="modal1" //instead of href="#modal1"
Example:
<button data-target="modal1" class="btn">Display My Modal</button>
Demo Here
var myApp = angular.module('myApp',[]);
var testController = function($scope, $http){
$(document).ready(function(){
$('.modal').modal();
});
$scope.clicked = function(){
$('#modal1').modal('open');
}
}
myApp.controller("testController",testController);
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script data-require="angular.js#~1.2.2" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<div ng-app ng-controller="testController">
<button data-target="modal1" class="btn">Click Me</button>
<button ng-click="clicked()" class="btn">ng-Click</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>My Modal</h4>
</div>
<div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">close</a>
</div>
</div>
</div>