Come eseguire il dropdown del completamento automatico come una griglia in angularJS?

Question

Qui ho creato campione per il completamento automatico, che sta lavorando bene e ho bisogno di fare qualche modifica sul this.currently funziona così

ma quello che ho bisogno è esattamente ho bisogno di mostrare la discesa come vista a griglia. alcuni come questo

può

qualsiasi aiuto su questo? .. grazie

var app = angular.module('app', ['ui.bootstrap']); 
 

 
    app.controller('TypeaheadCtrl', function ($scope, $http, limitToFilter, filterFilter) { 
 

 
    
 
    $scope.sample_data = [{ 
 
     "name": "Nelson", 
 
     "designation":"Senior Developer", 
 
     "company": "acme", 
 
     "companydisplay": "abc" 
 
     }, 
 
     { 
 
     "name": "suresh", 
 
     "designation":"Developer", 
 
     "company": "acme", 
 
     "companydisplay": "def" 
 
     }, 
 
     { 
 
     "name": "Naresh", 
 
     "designation":"Developer", 
 
     "company": "acme", 
 
     "companydisplay": "xyz" 
 
     }]; 
 

 
    $scope.filtered_sample_data = function (search) { 
 
     var filtered = filterFilter($scope.sample_data, search); 
 
     
 
     var results = _(filtered) 
 
     .groupBy('company') 
 
     .map(function (g) { 
 
      g[0].initial = true; // the first item in each group 
 
      return g; 
 
     }) 
 
     .flatten() 
 
     .value(); 
 
     return results; 
 
    }; 
 
    });

body { 
 
    font-family:'Trebuchet MS', Verdana, sans-serif; 
 
    margin:20px 0px; 
 
    padding:0px; 
 
    text-align:center; 
 
} 
 
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { 
 
    cursor:pointer; 
 
} 
 
label { 
 
    cursor:default; 
 
    margin:0; 
 
} 
 
.form { 
 
    width:400px; 
 
    margin:0px auto; 
 
    text-align:left; 
 
    background:#F2F1F0; 
 
    border-top-left-radius: 10px 5px; 
 
    border-top-right-radius: 10px 5px; 
 
    border:1px solid #474641; 
 
} 
 
.formHeader { 
 
    background:#474641; 
 
    color:#ddd; 
 
    padding:4px; 
 
    font-weight:600; 
 
    border-top-left-radius: 10px 5px; 
 
    border-top-right-radius: 10px 5px; 
 
} 
 
.formBody { 
 
    padding:10px; 
 
} 
 
.data { 
 
    margin:0px auto; 
 
    text-align:left; 
 
} 
 
.dropdown-menu { 
 
    text-align:left; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
th{ 
 
    background-color: #29ABE2; 
 
    color: white; 
 
} 
 
tr> td { 
 
    text-align: left; 
 
} 
 
th, td { 
 
    padding: 15px; 
 

 
} 
 
tbody>tr:hover { 
 
    background-color: #0088cc; 
 
    color: white; 
 
} 
 

 
.headerSortUp { 
 
    background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%; 
 
} 
 
.headerSortDown { 
 
    background: url(data:image/gif; 
 
    base64, R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat 99%; 
 
} 
 
    
 
.suggestion-name { min-width: 100px; } 
 
.suggestion-designation { min-width: 100px; } 
 
.suggestion-company { min-width: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 

 
    
 

 
<div ng-app="app"> 
 
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> 
 
     <!-- <pre>Model: {{result | json}}</pre> 
 
     <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)"> 
 
--> <pre>Model: {{monkey | json}}</pre> 
 

 
     <input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue"> 
 

 
    </div> 
 
    <!-- CACHE FILE: columnTwo.html --> 
 
    <script type="text/ng-template" id="columnTwo.html"> 
 
     <table class=""> 
 
      <thead ng-if="match.model.initial"> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Designation</th> 
 
       <th>Company</th> 
 
      </tr> 
 
      </thead> 
 
     <tr> 
 
     <td class="suggestion-name"> 
 
     <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)"> 
 
      <a>{{ match.model.name }} </a> 
 
     </div> 
 
     </td> 
 
     <td class="suggestion-designation"> {{ match.model.designation }} </td> 
 
     <td class="suggestion-company"> {{ match.model.companydisplay }} </td> 
 
     </tr> 
 
     </table> 
 
    </script>