Drop down with ng-selected option does not show selected

Question

Based on toggle button(YES, NO) i have select drop down, those toggle button change the value of the drop down, that does not support ng-selected when we select the item on any of the toggle button selection.

1) when we select the "YES" toggle button and on that click drop down option will change and we select the option from the drop down that's work fine for now.

2) But when we select the "No" toggle button and on that click drop option will change but ng-selected does not work and selected value will not be visible that's the

    <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ButtonsCtrl">

    <h4>Radio &amp; Uncheckable Radio</h4>
    <select ng-model="selectedItem">
        <option ng-repeat="item in items" 
        ng-selected="$first" value="{{item}}">{{item}}</option>
      </select>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel"
        ng-click="getItems('1')" btn-radio="'Left'">YES</label>
        <label class="btn btn-primary" 
        ng-click="getItems('2')" ng-model="radioModel" btn-radio="'Middle'">NO</label>

    </div>

</div>
  </body>
</html>

*************Below is the angularJS code ***************

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', 
    function($scope) {


      $scope.radioModel = 'Middle';
      $scope.items = ['one', 'two', 'three', 'four']

      $scope.getItems = function(criateria){
        if(criateria == '1'){
          $scope.items = ['one', 'two', 'three', 'four'];
        }else{
          $scope.items = ['Ele', 'Twlv', 'Thirteen', 'Fourteen'];
        }
      }

    });

Below is the attached screen shot please look into it

I am facing this issue from 2 to 3 day's, please help me in this to resolve — Dany, Oct 24 '19 at 11:21
Avoid using `ng-selected` with `ng-model`, The `ng-model` directive does two-way binding; `ng-selected`, one-way binding. — georgeawg, Oct 24 '19 at 17:01
@georgeawg which is the better way to use instead of ng-selected — Dany, Oct 25 '19 at 06:54

score 0 · Answer 1 · answered Oct 24 '19 at 12:07

Use this code as base

angular.module('app', [])
 .controller('AppCtrl', ['$scope', function($scope) {
    $scope.filterCondition = {
        operator: 'eq'
    }

    $scope.operators = [{
        value: 'eq',
        displayName: 'equals'
    }, {
        value: 'neq',
        displayName: 'not equal'
    }]
     $scope.getItems = function(criateria){
        if(criateria == '1'){
            $scope.filterCondition = {
        operator: 'eq1'
    }
    $scope.operators = [{
        value: 'eq1',
        displayName: 'equals1'
    }, {
        value: 'neq1',
        displayName: 'not equal1'
    }]
        }else{
            $scope.filterCondition = {
        operator: 'eq'
    }
    $scope.operators = [{
        value: 'eq',
        displayName: 'equals'
    }, {
        value: 'neq',
        displayName: 'not equal'
    }]
          
        }
      }
}])

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="app" >
<div ng-controller="AppCtrl">
    <div>Operator is: {{filterCondition.operator}}</div>
    <select ng-model="filterCondition.operator">
        <option ng-selected="{{operator.value == filterCondition.operator}}" ng-repeat="operator in operators" value="{{operator.value}}">{{operator.displayName}}</option>
    </select>
        <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel"
        ng-click="getItems('1')" btn-radio="'Left'">YES</label>
        <label class="btn btn-primary" 
        ng-click="getItems('2')" ng-model="radioModel" btn-radio="'Middle'">NO</label>

    </div>
    </div>
</body>

Thanks for help, but may i know where i did mistake in my code @avinash — Dany, Oct 24 '19 at 12:41
I mean why it does not working in my example because you did similar code working fine so, what changes should i do in my live code, why this problem occurs — Dany, Oct 24 '19 at 12:56

Drop down with ng-selected option does not show selected

1 Answers1