angularjs

angularjs with bootstrap template

by modar al nashar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MainCtrl">

</div>

CSS

.input-dropdown {
  position: relative;
  display: inline-block;
}

.input-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 2px;
  background: #EEE;
}

.input-dropdown .dropdown div {
  cursor: pointer;
  padding: 2px 5px;
}

.selected {
  color: red
}

.input-dropdown input:focus + .dropdown {
  display: block;
}

JavaScript

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

 app.controller('MainCtrl', function($scope) {
   
 });