AngularJS+UI Bootstrap: Simple Tabs

Simple tabs by AngularJS and UI Bootstrap.

by honzzz

HTML

<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-0.2.0.min.js"></script>
<script src="https://raw.github.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.2.0.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<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" ng-model="form.product_id" typeahead="option.id 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_id = 1;
});