AngularJS+UI Bootstrap: Simple Tabs

Simple tabs by AngularJS and UI Bootstrap.

HTML

<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.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];
});