diff --git a/bower.json b/bower.json
index 0cd5f65..5d8a452 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,5 @@
 {
   "name": "angular-bootstrap-slider",
-  "version": "0.0.6",
   "authors": [
     "Kyle Kemp <kyle@seiyria.com>"
   ],
@@ -22,7 +21,7 @@
     "tests"
   ],
   "dependencies": {
-    "seiyria-bootstrap-slider": "~3.1.0",
-    "angular": "~1.2.16"
+    "seiyria-bootstrap-slider": "4.x.x",
+    "angular": "1.3.x"
   }
 }
diff --git a/slider.js b/slider.js
index d0b50ed..42c4462 100644
--- a/slider.js
+++ b/slider.js
@@ -3,7 +3,7 @@ angular.module('ui.bootstrap-slider', [])
         return {
             restrict: 'AE',
             replace: true,
-            template: '<div><input class="slider-input" type="text" /></div>',
+            template: '<input class="slider-input" type="text" />',
             require: 'ngModel',
             scope: {
                 max: "=",
@@ -13,7 +13,7 @@ angular.module('ui.bootstrap-slider', [])
                 ngModel: '=',
                 range:'=',
                 sliderid:'=',
-                formater:'&',
+                formatter:'&',
                 onStartSlide: '&',
                 onStopSlide: '&',
                 onSlide: '&'
@@ -77,15 +77,15 @@ angular.module('ui.bootstrap-slider', [])
                     if (attrs.reversed) options.reversed = attrs.reversed === 'true';
                     if (attrs.enabled) options.enabled = attrs.enabled === 'true';
                     if (attrs.naturalarrowkeys) options.natural_arrow_keys = attrs.naturalarrowkeys === 'true';
-                    if (attrs.formater) options.formater = $scope.$eval($scope.formater);
+                    if (attrs.formatter) options.formatter = $scope.$eval($scope.formatter);
 
                     if (options.range && !options.value) {
                         options.value = [0, 0]; // This is needed, because of value defined at $.fn.slider.defaults - default value 5 prevents creating range slider
                     }
 
-                    var slider = $(element.find(".slider-input")[0]).slider(options);
-                    slider.slider('destroy');
-                    var slider = $(element.find(".slider-input")[0]).slider(options);
+                    var slider = $(element[0]).slider(options);
+                    element.slider('destroy');
+                    var slider = $(element[0]).slider(options);
 
                     var updateEvent = attrs.updateevent || 'slide';
 
diff --git a/test.html b/test.html
index 5913ec3..044aadb 100644
--- a/test.html
+++ b/test.html
@@ -37,7 +37,7 @@
 
 
             <br><br><br><br>
-            <slider ng-model="sliders.thirdSliderValue" formater="myFormater"></slider>
+            <slider ng-model="sliders.thirdSliderValue" formatter="myFormatter"></slider>
          	{{sliders.thirdSliderValue}}
 
             <br><br><br><br>
@@ -63,4 +63,4 @@
 		<!-- test file include -->
 		<script src="http://github.com/test.js"></script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test.js b/test.js
index 1fea90c..f8f2e9b 100644
--- a/test.js
+++ b/test.js
@@ -30,11 +30,11 @@ angular.module('angular-bootstrap-slider-test', ['ui.bootstrap-slider'])
 
 
         $scope.sliders.thirdSliderValue = 0;
-        $scope.myFormater = function(value) {
+        $scope.myFormatter = function(value) {
             return value + "%";
         };
 
         $scope.slideDelegate = function(value){
           $log.log('slide value: ' + value);
         };
-	}]);
\ No newline at end of file
+	}]);