update

example/index.html

@@ -22,6 +22,8 @@
 
 		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
 		<script src="../scale.js"></script>
+		<script src="./index.module.js"></script>
+		<script src="./index.service.js"></script>
 		<script src="./index.js"></script>
 	</body>
 </html>

example/index.js

@@ -1,7 +1,21 @@
-angular.module('myApp', ['scale']).controller('main', ['$scope', function($scope) {
+angular.module('myApp').controller('main', main);
+
+main.$inject = ['$scope', 'mainService'];
+
+function main($scope, mainService) {
+
 	$scope.data = [];
 
-	var SCALE_WIDTH = 50,
+	mainService.getVotes().then(function(res) {
+		$scope.data = res.data.map(function(item) {
+			return {
+				value: item["моя оценка"],
+				title: item["русскоязычное название"]
+			}
+		});
+	});
+
+	/*var SCALE_WIDTH = 50,
 	    SCALE_HEIGHT = 10;
 
 	for (var i=0; i < SCALE_WIDTH; i++) {
@@ -11,5 +25,5 @@ angular.module('myApp', ['scale']).controller('main', ['$scope', function($scope
 			value: value,
 			title: (i + 1) + " item"
 		});
-	}
-}]);
+	}*/
+}

example/index.module.js

@@ -0,0 +1 @@
+angular.module('myApp', ['scale']);

example/index.service.js

@@ -0,0 +1,11 @@
+angular.module('myApp').factory('mainService', mainService);
+
+mainService.$inject = ['$q', '$http'];
+
+function mainService($q, $http) {
+	return {
+		getVotes: function() {
+			return $http.get('./votes.json');
+		}
+	};
+}

scale.js

@@ -40,22 +40,33 @@ angular.module('scale', ['ng']).directive('scale', ['$templateCache', function($
       data: '='
     },
     link: function(scope, element, attrs) {
+      scope.$watch('data', function(newVal, oldVal) {
+        if (newVal.length && newVal !== oldVal) {
+          init(newVal);
+        }
+      });
+
       scope.theme = attrs.theme || 'default';
       scope.hasLine = Boolean(attrs.line);
 
       var SCALE_WIDTH = parseInt(attrs.width) || 50;
       var SCALE_HEIGHT = parseInt(attrs.height) || 10;
       var BLOCK_WIDTH = parseInt(attrs.boxSize) || 20;
 
+      scope.rowBlocks = new Array(SCALE_HEIGHT);
+
       scope.blockStyle = {
         width: BLOCK_WIDTH + 'px',
         height: BLOCK_WIDTH + 'px'
       };
 
-      scope.rowBlocks = new Array(SCALE_HEIGHT);
-
-      var initData = angular.copy(scope.data);
-      scope.marks = initData.splice(initData.length - SCALE_WIDTH, initData.length);
+      function init(data) {
+        if (SCALE_WIDTH < data.length) {
+          scope.marks = data.slice(data.length - SCALE_WIDTH, data.length)
+        } else {
+          scope.marks = data;
+        }
+      }
 
       scope.calcStyle = function(keyBlock, keyMark) {
         var i = scope.rowBlocks.length - keyBlock,