When the user clicks on the person icon, it triggers a form (form.html) using the ui-router logic defined in app.js. There are two types of dropdown boxes - one using the select tag and the other using the md-select tag. Everything works fine until I click on the second dropdown, which doesn't open the dropdown options window; instead, it freezes the page. I have included the code here on Plunker, although the page routing may not work there. You can refer to the code below for reference.
index.html
<body ng-app="myApp">
<div class="col-sm-3 sidenav">
<div class="well"> <!-- container to hold status bar and form -->
<nav class="navbar navbar-default navbar-custom">
<a style="font-size:2.5em;position: absolute; left: 50%;" ui-sref="form"><span class="glyphicon glyphicon-user fa-5x" id="Icon"></span></a>
</nav>
<div class="column-nav-form" ui-view="formColumn" > <!--holds the form -->
</div>
</div>
</div>
</body>
form.html
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Normal DropDown </h4>
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>I have three elements in my list, you should be able to pick whichever you like</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Material DropDown </h4>
<md-select onclick='console.log("clicked")' ng-model="selectedFilter" placeholder="Select a filter"> <md-select-label>{{ selectedFilter.name }}</md-select-label>
<md-option ng-value="opt" ng-repeat="opt in filters">{{ opt.name }}</md-option>
</md-select>
</div>
</body>
app.js
var myApp = angular.module('myApp', [ 'ngAnimate', 'ngAria', 'ui.bootstrap', 'ngMaterial', 'ngMessages', 'ui.router' ]);
//routing
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
},
"formColumn": {
templateUrl: "/form.html"
}
}
})
});
//dropdown
myApp.controller('myCtrl', function($scope) {
//log
console.log($scope.names);
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.filters = [
{
value: 'mine',
name: 'Assigned to me'
},
{
value: 'undefined',
name: 'Unassigned'
},
{
value: 'all',
name: 'All Tickets'
},
{
value: 'new',
name: 'New Tickets'
}
];
//log
console.log($scope.filters);
console.log($scope.selectedFilter);
});
http://plnkr.co/edit/SB7MUM44Ly01aWyL5M28?p=preview
View upon clicking person icon
https://i.sstatic.net/jhO61.png Note: Dropdown for md-select doesn't load.
Thank you in advance