I'm implementing materialize CSS in my AngularJS website which has a structure like this: a .html view which is connected to a .js controller which communicates to the database using a .js service. I copied this sample dropdown code from materialize website:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
But this dropdown is not working in my website. It also has a javascript code attached which I cant figure out where to place. I tried placing in my .js controller but still nothing. Can someone point me in the right direction.
Here are my .html and .js implementations:
manage_projects.html
<td>{{prj.name}}</td>
<td>
<a class="dropdown-button" href="" data-activates="dropdown">
{{prj.skills.length}} skill(s)
</a>
<ul id="dropdown" class="dropdown-content">
<li ng-repeat="skl in prj.skills">
{{skl.name}}
</li>
</ul>
</td>
ManageProjectsController.js
(function () {
'use strict';
angular.module('app')
.controller("ManageProjectsController", ['$scope', '$rootScope', '$location', 'UserService', 'ManageProjectService', function ($scope, $rootScope,$location, UserService, ManageProjectService) {
if(UserService.GetCurrentUser().role !== 'Executive'){
$location.path('/dashboard');
}
$scope.projects = "";
$('.dropdown-button').dropdown();
ManageProjectService.GetAllProjects().then(function(res){
$scope.projects = res.data.projects;
});
}]);
})();