AngularJS select default option according to url

Question

I have a dropdown menu that contains some links for various section of the page. The application is written with AngularJS version 1.4, the dropdown menu does works, but when I enter the page directly through the url in the dropdown menu is always selected the empty voice instead of the correct one. Here' the code:

HTML

<select ng-options="menu_voice.name for menu_voice in menu_voices track by menu_voice.url" ng-model='selectedOption' ng-change="changeLink()">
</select>

JS:

$scope.changeLink = function(){
    $state.go($scope.selectedOption.url);
};

$scope.menu_voices = [
    {
        "url": 'account.company',
        "name": 'Company'
    },
    {
        "url": 'account.billing',
        "name": 'Billing'
    },
    {
        "url": 'account.password',
        "name": 'Password'
    },
    {
        "url": 'account.design',
        "name": 'Design'
    },
    {
        "url": 'account.social',
        "name": 'Social'
    },
    {
        "url": 'account.notifications',
        "name": 'Notifications'
    }
];

If I select a voice in the dropdown menu, I go to the correct link with the correct voice selected. But if in the url bar I enter something like:

www.myapp.com/account/billing

I go to the correct page but in the dropdown menu the selected voice is empty.

How can I solve this?

EDIT after first reply:

I added this:

var name = $window.location.pathname;
name = name.substring(9);
name = name.charAt(0).toUpperCase() + name.slice(1);

var url = $window.location.pathname.substring(1).replace(/\//g, '.');

$scope.getSelectedFromUrl = function(){
    $scope.selectedOption = {"name": name, "url": url};
};

If I print in the console

console.log($scope.selectedOption);

I get the correct object, e.g:

Object {name: "Design", url: "account.design"}

In the html I simply added the ng-init:

 <select ng-options="menu_voice.name for menu_voice in menu_voices track by menu_voice.url" ng-model='selectedOption' ng-change="changeLink()" ng-init="selectedOption = getSelectedFromUrl()">
 </select>

But nothing changed.

Answer 1

You could use the ng-init directive to call a function that parses the route and matches it to an item from the voices array. Then set the selectedOption model to that array item, which will set the select option.

ng-init="selectedOption = getSelectedFromURL()"