Basic Controller with inputs

by Ryan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div ng-app="app" ng-controller="MainController">

    <h2>Select with array of strings: {{selected1}}</h2>
    <select x-ng-model="selected1" x-ng-options="t for t in collection1"></select>
    
    <h2>Select with array of objects: {{selected2}}</h2>
    <select x-ng-model="selected2" x-ng-options="t.id as t.name for t in collection2"></select>
    
    <h2>Select with array of objects using object as selection: {{selected3.id}}</h2>
    <select x-ng-model="selected3" x-ng-options="t as t.name for t in collection2"></select>

    <h2>Checkbox:</h2>
    <input type="checkbox" x-ng-model="check1">Check 1: {{check1}}</input><br/>
    <input type="checkbox" x-ng-model="check2">Check 2: {{check2}}</input><br/>
    <input type="checkbox" x-ng-model="checkAll">Check All:: {{checkAll}}</input><br/>

</div>

JavaScript

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

function MainController($scope) {
    $scope.selected1 = "one";
    $scope.collection1 = ["one", "two", "three"];
    
    $scope.selected2 = "two";
    $scope.collection2 = [
        { id: "one", name: "One" }, 
        { id: "two", name: "Two" }, 
        { id: "three", name: "Three" }];

    $scope.selected3 = $scope.collection2[2];
    
    $scope.check1 = false;
    $scope.check2 = false;
    $scope.checkAll = false;
    $scope.$watch('checkAll', function(newValue, oldValue){
        $scope.check1 = $scope.checkAll;
        $scope.check2 = $scope.checkAll;
    });
}