AngularJS Bootstrap Popover Directive

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div ng-app="customDirectives" ng-controller="MyCtrl">
    
    
  
    <button class=" widgetOption text-center unit-popover" type="input" unit-popover  popover-placement="bottom" Id="myId1" length="length" speed="speed" time="time" popover-label="Label" changer="change()" unitbinding="bindingclasses">
   fr </button>
    
    <button class=" widgetOption text-center unit-popover" type="input" unit-popover  popover-placement="bottom" Id="myId2" length="length" speed="speed" time="time" popover-label="Label" changer="change()" unitbinding="bindingclasses">dec</button>
 
    <button class=" widgetOption text-center unit-popover" type="input" unit-popover  popover-placement="bottom" Id="myId3" length="length" speed="speed" time="time" popover-label="Label" changer="change()" unitbinding="bindingclasses">dec</button>

CSS

.unit-popover > .popover-title {
    padding-right: 30px;
}
  .unit-popover > .arrow {
    visibility :hidden;
}
 .unit-popover > .popover{
    width: 230px;
   
    border-radius: 0;
    background-color: white;
    box-shadow: 0px 0px 1px 1px gainsboro;
}

 .unit-popover > .popover.bottom {
    margin-top: 0px;
}
 .unit-popover > .select {
  width: 200px;
  height: 25px;
}

JavaScript

customDirectives = angular.module('customDirectives', []);
function MyCtrl($scope) {
    $scope.speed = ['speed1','speed2','speed3','speed4','speed5','speed6','speed7']; 
    $scope.length = ['length1','length2','length3'];
     $scope.time = ['distance1','distance2','distance3'];
     
     $scope.bindingclasses = {
     "myId1": {
        speed: 'speed1',
        length: 'length1',
        time: 'distance1'
     },
        "myId2": {
        speed: 'speed7',
        length: 'length2',
        time: 'distance2'
     },
     
        "myId3": {
        speed: 'speed3',
        length: 'length3',
        time: 'distance3'
     }
     };
        var object = {
        speed: 'speed4',
        length: 'length4',
        distance: 'distance4'
        }
        $scope.bindingclasses['something'] = object;
 
    $scope.selectedName = 'abc';
    $scope.change = function(){
   
       console.log(  $scope.bindingclasses)
   
    }
    
    
}

customDirectives.directive('unitPopover', function ($compile) {
    return {
        scope : {
            length : '=length',
            speed : '=speed',
            time: '=time',
            changerMethod: '=changer',
            unitbinding: '=unitbinding'
       }, 
        restrict: 'A',
        link: function (scope, el, attrs) {
          
            var temp = 
            '<label class="unitLabel">Length</label><br/>'+
            '<select class="select" ng-change="changerMethod" ng-model="unitbinding['+"'"+el[0].id+"'"+'].length"  ng-options="item for item in length"><br/></select><br />'+
            '<label class="unitLabel">Speed</label><br/>'+ 
            '<select class="select" ng-change="changerMethod" ng-model="unitbinding['+"'"+el[0].id+"'"+'].speed"  ng-options="item for item in speed"><br/></select><br />'+
            '<label class="unitLabel">Time</label><br/>'+
            '<select class="select" ng-change="changerMethod" ng-model="unitbinding['+"'"+el[0].id+"'"+'].time"  ng-options="item for item in...