Edit in JSFiddle

(function () {
   'use strict';

    var app = angular.module('app', []);
    
    app.directive('bootstrapDropdown', function ($compile) {
        return {
            restrict: 'E',
            scope: {
                items: '=dropdownData',
                selectedItem: '=preselectedItem',
                ngModel: '=',
                placeholder: '@',
                fieldLabel: '@'
            },
            link: function (scope, element, attrs) {
                
                scope.selectVal = function (item) {
                    scope.ngModel = item;
                };
                
                var html = '';
                html += '<div class="form-group">';
                html += '  <div class="input-group">';
                html += '    <div class="input-group-addon" style="min-width:100px" data-ng-model="fieldLabel">{{fieldLabel}}</div>';
                html += '    <input class="form-control" id="statusinput" type="text" data-ng-model ="ngModel" data-ng-attr-placeholder="{{placeholder}}" />';
                html += '    <div class="input-group-btn" data-ng-if="items.length">';
                html += '      <div class="btn-group ">';
                html += '        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >';
                html += '          <span class="caret"></span>';
                html += '        </button>';
                html += '        <ul class="dropdown-menu dropdown-menu-right dropdown-scroll" role="menu">';
                html += '          <li data-ng-repeat="item in items"><a data-ng-href="" role="menuitem" tabindex="-1" data-ng-click="selectVal(item)">{{item}}</a></li>';
                html += '        </ul>';
                html += '      </div>';
                html += '    </div>';
                html += '  </div>';
                html += '</div>';
                
                element.append($compile(html)(scope));
            }
        };
    });

    app.controller('MyController', ['$scope', function($scope) {
        $scope.form = {};
        $scope.form.serviceLevelName = 'Normal';
        $scope.servicesData = {
        		listOfServiceNames : [
                    "Low",
                    "Normal",
                    "Medium",
                    "High",
                    "Immediate"
                ]
        }
    }]);

}());

<div class="container">
    <div class="panel panel-default mypanel">
        <div class="panel-heading">
            <h3 class="panel-title">Choose a Service Level</h3>
        </div>
        <div class="panel-body">
            <form class="form">
				<bootstrap-dropdown data-field-label="Level" data-ng-model="form.serviceLevelName" data-placeholder="Service Level" data-dropdown-data="servicesData.listOfServiceNames"></bootstrap-dropdown>

            </form>
            <pre>Chosen Value : {{form.serviceLevelName}}</pre>
        </div>
    </div>
</div>
.dropdown-scroll {
    overflow: auto;
    height: 90px;
}
.mypanel {
    max-width: 400px;
    margin-top:15px;
}

External resources loaded into this fiddle: