title: AngularJS select default option according to url
body: <p>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:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;select ng-options="menu_voice.name for menu_voice in menu_voices track by menu_voice.url" ng-model='selectedOption' ng-change="changeLink()"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$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'
      }
  ];
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>www.myapp.com/account/billing
  </code></pre>
  
  <p>I go to the correct page but in the dropdown menu the selected voice is empty.</p>
  
  <p>How can I solve this?</p>
  
  <p>EDIT after first reply:</p>
  
  <p>I added this:</p>
  
  <pre><code>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};
  };
  </code></pre>
  
  <p>If I print in the console </p>
  
  <pre><code>console.log($scope.selectedOption);
  </code></pre>
  
  <p>I get the correct object, e.g:</p>
  
  <pre><code>Object {name: "Design", url: "account.design"}
  </code></pre>
  
  <p>In the html I simply added the ng-init:</p>
  
  <pre><code> &lt;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()"&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>But nothing changed.</p>