Dropdown demo

http://angularjs.org/

by Pratik Bhattachary

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select>
  <div ng-repeat="item in selectedItem">
    {{item.Name}}
  </div>
</div>

JavaScript

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

function MyCtrl($scope) {
  $scope.viewItemKeys = ["pencils", "pens", "books"];

  $scope.viewItemObj = {
    "pencils": {
      "0": {
        Name: "Camel"
      },
      "1": {
        Name: "Nataraj"
      },
      "2": {
        Name: "Space"
      }
    },
    "pens": {
      "0": {
        Name: "Camel"
      },
      "1": {
        Name: "Parker"
      },
      "2": {
        Name: "Fountain"
      },
      "3": {
        Name: "Dealer"
      },
      "4": {
        Name: "Gel"
      },
      "5": {
        Name: "Inker"
      },
      "6": {
        Name: "Mountain View"
      },
      "7": {
        Name: "Decor"
      }
    },
    "books": {
      "0": {
        Name: "The Da Vinci Code"
      },
      "1": {
        Name: "How to kill a Mocking Bird"
      },
      "2": {
        Name: "Tooth and Nails"
      },
      "3": {
        Name: "A song of Ice and Fire"
      },
      "4": {
        Name: "Dance with the Dragons"
      }
    }
  };

  $scope.selectedItem = $scope.viewItemObj["pens"];
  $scope.onItemChange = function() {
    console.log($scope.selectedItem);
  }
}