Currently I have my <select> inside of a ui-tabset and when it is inside of a tabset it does not seem to update my $scope.filter_item_package correctly when I have it set as the model.

Here is my code: HTML:

<uib-tab index="2" heading="All Harvest Plans">
  <select class="form-control"  ng-model='filter_item_package' ng-change='package_change()' >
   <option ng-repeat=" items in cases_filter_items" ng-selected="{{items.t2}}" value="{{items.t2}}">{{items.t3}}


$scope.filter_item_package = 'Cases'
 $scope.cases_filter_items = [
{'id':1,'t2':'Cases','t3':'Show Cases'},
{'id':2,'t2':'Acres','t3':'Show Acres'},
{'id':2,'t2':'Palettes','t3':'Show Pallettes'}
$scope.package_change = function(){console.log($scope.filter_item_package)}

But when I don't have the options nested inside the ui-tabs it updates correctly. For example, when I change to Acres or Palettes it will console.log accordingly. This is just a rough draft of what is going on.

1 Answers

Community On

I can see at least one problem with your draft.

When you write ng-selected="{{items.t2}}", you are saying:

if items.t2 returns true, then set this element's selected attribute.

And because items.t2 returns a string, which is 'truthy' in Javascript, you are setting all of your ng-repeat instances to be selected by default.

Instead, use ng-selected="items.t2 === filter_item_package". Note that {{}} is not required for ng-* directives.