AngularJS+UI Bootstrap: Simple Tabs

Simple tabs by AngularJS and UI Bootstrap.

by Gleb

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<div ng-controller="MyTabCtrl"> <pre>Model: {{form.product.id | json}}</pre>

    <p>The goal is to show "Horay!" while the model is set to 1.</p>
    <input type="text" autocomplete="off" ng-model="form.product" typeahead="option as option.name for option in p.options | filter:$viewValue" />
    <p>Try to write "Audi".</p>
</div>

JavaScript

angular.module("myApp", ['ui.bootstrap']).
controller("MyTabCtrl", function ($scope) {
    $scope.p = {};
    $scope.form = {};

    $scope.p.options = [{
        "id": 1,
            "name": "Horay!"
    }, {
        "id": 21,
            "name": "Audi 1"
    }, {
        "id": 22,
            "name": "Audi 2"
    }];

    // preload saved value
    $scope.form.product = $scope.p.options[0];
});