Angular Selects w/ multiple data points

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css">
<!-- <input id="temp" type="text"> -->
<div ng-controller="MainCtrl">
    <hr>
    <select ng-model="foo" ng-options="obj.text for obj in options" ng-change="output()" >
        <option value="">Select Value...</option>
    </select>
 </div>

JavaScript

// ===========================================
// App
// ===========================================
var app = angular.module('myapp', []);
// ===========================================
// Controller
// ===========================================
app.controller('MainCtrl', function ($scope, $timeout) {
    
    $scope.foo = 1; // This needs to be the object
    $scope.options = [
        {value: 1, text: 'Value 1', id: 123},
        {value: 2, text: 'Value 2', id: 234},
        {value: 3, text: 'Value 3', id: 345}        
    ];
        
        $scope.output = function(){
            console.log($scope.foo);
        }

});