Angularjs With Bootstrap Tooltip

by zohairzohair4

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.css">
<div id="container" ng-controller="AccordionDemoCtrl">
  <div id="search-container" ng-app="graphApp" ng-controller="AccordionDemoCtrl">
    <div ng-controller="AccordionDemoCtrl">
      <label>Enter the Name to Search</label>
      <input type="text" ng-model="search_name" class="form-control" Value=''>
      
      <button type="button" class="btn btn-info" ng-click="searchFactory(search_name)">Search
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </button>
      
      <p> {{number_of_hits}} hits</p>
      <table ng-table="tableParams" class="table table-hover">
        <dir-pagination-controls max-size="5" direction-links="true" boundary-links="false"> </dir-pagination-controls>
        <tbody>
          <tr ng-repeat="x in names" ng-dblclick='myFunction(x.ID,x.NAME)'>
            <td style="width: 50px;">{{ $index + 1 }} </td>
            <td>{{ x.NAME }}</td>
            <td style="width: 65px;">{{ x.ID }}</td>
            <td style="width: 80px;">{{ x.TYPE }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

#graph-container {
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  position: absolute;
}

#search-container {
  top: 0;
  bottom: 0;
  left: 0;
  width: 325px;
  background-color: #eee;
  position: absolute;
  display: block;
}

table,
th,
td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 1px;
  font-size: 100%;
}

#notice {
  bottom: 1em;
  right: 1em;
  position: absolute;
}

.hidden {
  display: none;
}

table {
  table-layout: fixed;
  width: 325px;
}

table.lamp {
  width: 100%;
  border: 0px solid #d4d4d4
}

JavaScript

var search_name
var angularjsapp = angular.module('graphApp', []);
angularjsapp.factory('searchFactory', function() {
  //return $resource('friends.json');
  return {
    myfunc: function(search_name) {
      console.log('ok')
      keyword_type = 1
      loading_value = waitfunction(search_name)
      console.log(loading_value)
      return loading_value
    }
  }
});

angularjsapp.controller('AccordionDemoCtrl', function($scope, searchFactory) {
  $scope.count = 0;
  $scope.namesPerPage = 10
  $scope.currentPage = 1;
  $scope.searchFactory = searchFactory.myfunc
});


$scope.$apply(function() {
function waitfunction(search_name){
    var obj = { value: 0 };
    $timeout(function () {
      obj.value = 1;
    }, 2000);
    return obj;       
};
});