Angular ui-sref on dropdown not working

Question

I have an angular app with routing. I have a dropdown select defined as follows:

<select class="form-control" id="transactiontype" ng-model="tt">
    <option><a ui-sref="cash">Cash</a></option>
    <option><a ui-sref="cheque">Cheque</a></option>
    <option><a ui-sref="debitcard">Debit</a></option>
    <option><a ui-sref="creditcard">Credit</a></option>
</select>

When i select one of the dropdowns, somehow it is not loading the view i am referencing. Where am i going wrong? I also tried this:

<option ui-sref="creditcard">Credit</option>

We need to see the router config to answer your question – Norbor Illig Mar 23 '15 at 14:09 — Norbor Illig, Mar 23 '15 at 14:09

score 4 · Answer 1 · edited May 23 '17 at 11:54

I'm pretty sure it's because the a tags won't work inside the select - option tags.

As per this SO question: using href link inside option tag

Try writing a function that will redirect the page and trigger it based on the select change or maybe your model change, whatever it best for your program.

something like:

<select class="form-control" id="transactiontype" ng-model="tt" ng-change="locationChangeFunction()">
...
</select>

Your controller might look like:

angular.module('myApp')
.controller('myController', ['$scope', '$state', function ($scope, $state){

    $scope.locationChangeFunction = function(){
         $state.go($scope.tt);
    }
}]);

EDIT

Use a combination of both solutions (credit to Hieu TB):

<select class="form-control" id="transactiontype" ng-model="tt" ng-options="opt.value as opt.label for opt in options" ng-change="locationChangeFunction()"></select>

ng-change will wait for the model change, which will change the DOM, which will trigger the change, now you're not running a resource consuming $watch function

@Hieu TB's method might be a more relaibale to go, you'd have to try it, I'd rather do the change on an event because .$watch is essentially a function that runs all the time, whereas on the event (like ng-change) you only run the function when you need to. However I don't know if the ng-change will fire before or after the model changes, even if it does you might just have a race condition, however with $watch you KNOW the model changed. I'd still try to find a way to do it with an event rather than watch because if you change your model for any other reason, you're changing page again. — Thierry Blais, Mar 23 '15 at 14:43
Thank @Likwid_T to point out this. I think "ng-change" is the best too, just because I too eagle to answer the question and forget about it. I had already given your answer my up vote, :) — Hieu TB, Mar 24 '15 at 07:33

score 3 · Accepted Answer · edited Apr 03 '15 at 22:57

consider using ng-options instead:

myApp.controller('MainController', ['$scope', '$state', function($scope, $state) {    
$scope.options = [
  { label: 'Cash', value: 'cash' },
  { label: 'Cheque', value: 'cheque' },
  { label: 'Debit', value: 'debit' },
  { label: 'Credit', value: 'credit' }
];
$scope.$watch('tt', function(value) {
  if(value) {
    $state.go(value);
  }
});
}]);

HTML:

<div ng-controller="MainController">
  <select class="form-control" id="transactiontype" ng-model="tt" ng-options="opt.value as opt.label for opt in options">
  </select>
</div>

EDIT: Agree with what @Likwid_T said, I think ng-change is the best choice to detect the change in select tag. I just forgot about it at that moment. So please refer to his answer too. Good day.

score 0 · Answer 3 · answered Mar 30 '15 at 04:25

My solution ended up just using a generic href, but using the old ng-router declaration with a '#/' prefix. For example: instead of using...

<select class="form-control" id="transactiontype" ng-model="tt">
    <option><a ui-sref="cash">Cash</a></option>
    <option><a ui-sref="cheque">Cheque</a></option>
    <option><a ui-sref="debitcard">Debit</a></option>
    <option><a ui-sref="creditcard">Credit</a></option>
</select>

Try using href with '#/' prefix like so...

<select class="form-control" id="transactiontype" ng-model="tt">
    <option><a href="#/cash">Cash</a></option>
    <option><a href="#/cheque">Cheque</a></option>
    <option><a href="#/debitcard">Debit</a></option>
    <option><a href="#/creditcard">Credit</a></option>
</select>

Angular ui-sref on dropdown not working

3 Answers3