I've been trying to use Bootstrap Tooltip in my Angular code, but I'm having trouble getting it to work. I thought the Angular expressions like: {{o.client_name}}, {{o.client_name}} would work, but they are not. Can someone help me understand why?
Angular Code:
<div class="col-md-4" ng-repeat="o in form.users" ng-show="form.users.length">
<div>
<p><b>title</b>:{{o.title}}</p>
<p><b>client name</b>:{{o.client_name}}</p>
<p><b>description</b>:{{o.description}}</p>
<p><b>dev tool</b>:{{o.primary_develop}}</p>
</div>
<div class="base_image_div">
<img ng-src="/images/{{o.thumbnail}}" class="img-responsive base_image" alt="{{o.description}}">
</div>
</div>
My tooltip code with Angular:
<div class="container">
<a href="#" class="custom-tooltip" data-toggle="tooltip" data-placement="right" data-html="true" title=""
data-title="<div class='row ballon-tooltip'>
<ul>
<li> <b>title</b>:{{o.title}}</li>
<li> <b>client name</b>:{{o.client_name}} </li>
<li> <b>description</b>:{{o.description}}</li>
<li> <b>dev tool</b>:{{o.primary_develop}}</li>
</ul>
</div>">
<img ng-src="../public/images/{{o.thumbnail}}" class="img-responsive base_image" alt="{{o.description}}"></a></li>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>