<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script data-require="jquery@*" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.9.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<h1>Angular UI Bootstrap tooltip fine point</h1>
The following input element has both ng-model and tooltip attributes. The tooltip works but ng-model does not.
<br/>
<input type="text" ng-model="name1" tooltip="I am a tooltip!" />
<p></p>
{{greeting + name1}}
<p></p>
<hr>The following input element has an ng-model attribute but no tooltip attribute. It works as I expect it to.
<br/>
<input type="text" ng-model="name2" />
<p></p>
{{greeting + name2}}
<hr>Here is the solution, courtesy of <a target=_blank href=http://stackoverflow.com/questions/17270564/angular-ui-bootstrap-not-working-with-angularjs-event-handling>http://stackoverflow.com/questions/17270564/angular-ui-bootstrap-not-working-with-angularjs-event-handling</a>. Read this: <a target=_blank href=https://github.com/angular/angular.js/wiki/Understanding-Scopes>https://github.com/angular/angular.js/wiki/Understanding-Scopes</a>
<br/>
<input type="text" ng-model="foo.name3" tooltip="I am also a tooltip!" />
<p></p>
{{greeting + foo.name3}}
</body>
</html>
// Code goes here
angular.module('myapp', ['ui.bootstrap'])
.controller('AppCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hello ';
$scope.foo = {};
}]);
/* Styles go here */
.nav, .pagination, .carousel a { cursor: pointer; }