ng-option not working ng-view and materializecss.com

Question

I am using ng-option in my template with routing and materializecss.com, providing data to ng-option through controller.

ng-option HTML :

<select ng-model="ddlFruits" ng-options="fruit.Idx as fruit.city for fruit in Fruits" ng-change="GetValue()">
</select>

MainCtrl

$scope.Fruits = [
    {
        Id: 1,
        Name: 'Apple'
    }, 
    {
         Id: 2,
         Name: 'Mango'
    }, 
    {
        Id: 3,
        Name: 'Orange'
    }
];

and this how I initialised select in app.js

$(document).ready(function() {
    $('select').material_select();
});

After removing materialize.css and materialize.js, select is working totally fine, so there is something wrong using both together or I have to initialise "select" in some different way, by the a simple select list is working totally fine but when we are passing data throw js, there is problem.

Screen shot, left is where I am trying to pass data through controller and right is simple select option

Framework I am using : https://materializecss.com

EDIT : ng-option was working before when I was not using routing also when I was it with framework alone, but with together it is not.