using ng-show on option select angularjs

Question

I want to bind my input field to my select option. so if the select option is Yes, the input field should be visible and if it is No, the input field should be hidden.

(function(){

  var app = angular.module('spa',[

    $rootScope.options = [
      {
        id: 0,
        name: 'No'
      }, 
      {
        id: 1,
        name: 'Yes'
      }
    ]

  ]);  

}());


 <form name="newData" class="ng-scope ng-pristine ng-invalid ng-invalid-required" error-popup="newData" novalidate> 
    <div class="form-group item item-input item-select">
      <div class="input-label">
        Booking Fee Paid
      </div>
      <select name="booking" ng-model="user.booking" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-options="option.name for option in options track by option.id" ng-init ="user.booking = options[0]" required>
      </select>
    </div>  

    <div class="row" ng-show="user.booking.name == 'Yes'">
        <div class="col">
        <div class="form-group item item-input">
                <input type="text" name="amount" ng-model="user.amount" class="form-control" placeholder="Amount">
            </div> 
        </div>
    </div>
  </form>

http://plnkr.co/edit/v0NrbTeigo3lm1njRu9A?p=preview

Any help is appreciated

Answer 1

I suggest you to go through the beginner tutorials @ angularjs.org.

Here is a working sample that does just what you're asking for:

 angular.module('app', []) .controller('Sample', Sample); function Sample() { this.options = [{ id: 0, name: 'No' }, { id: 1, name: 'Yes' }]; this.booking = this.options[0]; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="Sample as vm"> <select name="booking" ng-model="vm.booking" ng-options="option.name for option in vm.options"></select> <pre>{{ vm.booking | json }}</pre> <input type="text" ng-show="vm.booking.name === 'Yes'"/> </div>

Answer 2

Second parameter specifies required modules not the implementation:

angular.module(name, [requires], [configFn]);

So you had inject error. Here is the fixed code:

http://plnkr.co/edit/L02U4Cq0HIqeLL1AOcbl

var app = angular.module('spa', []);

app.controller('MyController', function($scope) {
  $scope.options = [{
    id: 0,
    name: 'No'
  }, {
    id: 1,
    name: 'Yes'
  }];
});