diff --git a/app/assets/javascripts/angular/controllers/timelines_controller.js b/app/assets/javascripts/angular/controllers/timelines_controller.js
index 69fbae9d9f..e8980b685f 100644
--- a/app/assets/javascripts/angular/controllers/timelines_controller.js
+++ b/app/assets/javascripts/angular/controllers/timelines_controller.js
@@ -5,11 +5,6 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
   };
 
   // Setup
-  $scope.slider = null;
-  $scope.timelineContainerNo = 1;
-  $scope.currentOutlineLevel = 'level3';
-  $scope.currentScale = 'monthly';
-
 
   // Get server-side stuff into scope
   $scope.currentTimelineId = gon.current_timeline_id;
@@ -18,7 +13,10 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
 
   // Get timelines stuff into scope
   $scope.Timeline = Timeline;
-
+  $scope.slider = null;
+  $scope.timelineContainerNo = 1;
+  $scope.currentOutlineLevel = 'level3';
+  $scope.currentScaleName = 'monthly';
 
   // Container for timeline rendering
   $scope.getTimelineContainerElementId = function() {
@@ -28,6 +26,17 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
     return angular.element(document.querySelector('#' + $scope.getTimelineContainerElementId()));
   };
 
+  $scope.increaseZoom = function() {
+    if($scope.currentScaleIndex < Object.keys(Timeline.ZOOM_CONFIGURATIONS).length - 1) {
+      $scope.currentScaleIndex++;
+    }
+  };
+
+  $scope.decreaseZoom = function() {
+    if($scope.currentScaleIndex > 0) {
+      $scope.currentScaleIndex--;
+    }
+  };
 
 
 
@@ -37,7 +46,7 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
   $scope.updateToolbar = function() {
     $scope.slider.slider('value', $scope.timeline.zoomIndex + 1);
     $scope.currentOutlineLevel = Timeline.OUTLINE_LEVELS[$scope.timeline.expansionIndex];
-    $scope.currentScale = Timeline.ZOOM_SCALES[$scope.timeline.zoomIndex];
+    $scope.currentScaleName = Timeline.ZOOM_SCALES[$scope.timeline.zoomIndex];
   };
 
   $scope.$on('timelines.dataLoaded', function(){
@@ -107,12 +116,10 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
 
 
 
-
-
-
   // Load timeline
   $scope.timeline = TimelineService.createTimeline($scope.timelineOptions);
 
+
   angular.element(document).ready(function() {
     // start timeline
     $scope.timeline.registerTimelineContainer($scope.getTimelineContainer());
diff --git a/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js b/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js
index d72a87eea1..4e8b875e1e 100644
--- a/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js
+++ b/app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js
@@ -2,7 +2,7 @@ timelinesApp.directive('zoomSlider', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attributes) {
-      scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
+      scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScaleName);
       scope.slider = element.slider({
         min: 1,
         max: Timeline.ZOOM_SCALES.length,
@@ -12,8 +12,8 @@ timelinesApp.directive('zoomSlider', function() {
           scope.currentScaleIndex = ui.value - 1;
         },
         change: function(event, ui) {
-          scope.currentScaleIndex = ui.value - 1;
-          scope.timeline.zoom(ui.value - 1);
+          scope.updateScaleIndex(ui.value - 1);
+          scope.$apply();
         }
       }).css({
         // top right bottom left
@@ -22,19 +22,31 @@ timelinesApp.directive('zoomSlider', function() {
 
       // Slider
       // TODO integrate angular-ui-slider
-      scope.getCurrentScaleLevel = function() {
-        return scope.slider.slider('value');
-      };
-      scope.setCurrentScaleLevel = function(value) {
-        scope.slider.slider('value', value);
+
+      scope.updateScaleIndex = function(scaleIndex) {
+        scope.currentScaleIndex = scaleIndex;
+
+        newScaleName = Timeline.ZOOM_SCALES[scaleIndex];
+        if (scope.currentScaleName !== newScaleName) {
+          scope.currentScaleName = newScaleName;
+        }
       };
 
-      scope.$watch('currentScaleIndex', function(){
-        scope.currentScale = Timeline.ZOOM_SCALES[scope.currentScaleIndex];
+      scope.$watch('currentScaleIndex', function(newIndex){
+        scope.updateScaleIndex(newIndex);
       });
-      scope.$watch('currentScale', function(){
-        scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScale);
-        // scope.setCurrentScaleLevel(scope.currentScaleIndex);
+
+      scope.$watch('currentScaleName', function(newScaleName, oldScaleName){
+        if (newScaleName !== oldScaleName) {
+          scope.currentScale = Timeline.ZOOM_CONFIGURATIONS[scope.currentScaleName].scale;
+          scope.timeline.scale = scope.currentScale;
+
+          scope.currentScaleIndex = Timeline.ZOOM_SCALES.indexOf(scope.currentScaleName);
+          scope.slider.slider('value', scope.currentScaleIndex + 1);
+
+          scope.timeline.zoom(scope.currentScaleIndex);
+
+        }
       });
 
     }
diff --git a/app/assets/javascripts/timelines/ui.js b/app/assets/javascripts/timelines/ui.js
index 825fdb407e..77bedfa556 100644
--- a/app/assets/javascripts/timelines/ui.js
+++ b/app/assets/javascripts/timelines/ui.js
@@ -139,17 +139,21 @@ jQuery.extend(Timeline, {
     } else {
       this.scale = scale;
     }
+
+    return this.getDaysForCurrentScale();
+  },
+  getDaysForCurrentScale: function() {
     var days = this.getDaysBetween(
       this.getBeginning(),
       this.getEnd()
     );
-    return days * this.DAY_WIDTH * scale;
+    return days * this.DAY_WIDTH * this.scale;
   },
   getWidth: function() {
 
     // width is the wider of the currently visible chart dimensions
     // (adjusted_width) and the minimum space the timeline needs.
-    return Math.max(this.adjusted_width, this.setScale() + 200);
+    return Math.max(this.adjusted_width, this.getDaysForCurrentScale() + 200);
   },
   resetWidth: function() {
     delete this.adjusted_width;
@@ -207,8 +211,6 @@ jQuery.extend(Timeline, {
     }
     index = Math.max(Math.min(this.ZOOM_SCALES.length - 1, index), 0);
     this.zoomIndex = index;
-    var scale = Timeline.ZOOM_CONFIGURATIONS[Timeline.ZOOM_SCALES[index]].scale;
-    this.setScale(scale);
     this.resetWidth();
     this.triggerResize();
     this.rebuildAll();
@@ -1315,6 +1317,9 @@ jQuery.extend(Timeline, {
   },
   triggerResize: function() {
     var root = this.getUiRoot();
+    if (!root) {
+      return false;
+    }
     var width = root.width() - root.find('.tl-left-main').width() -
                   Timeline.BORDER_WIDTH_CORRECTION;
     this.adjustWidth(width);
diff --git a/app/views/timelines/_toolbar.html.erb b/app/views/timelines/_toolbar.html.erb
index d5dc24d712..d7ad2bd19b 100644
--- a/app/views/timelines/_toolbar.html.erb
+++ b/app/views/timelines/_toolbar.html.erb
@@ -6,7 +6,7 @@
   <div class="tl-toolbar-container" style="width: 1px; height: 20px; background-color: rgb(0, 0, 0);"></div>
 
   <div class="tl-toolbar-container">
-    <a href="javascript://" title="Zoom out" class="icon tl-icon-zoomout" ng-click="setCurrentScaleLevel(getCurrentScaleLevel() - 1)"></a>
+    <a href="javascript://" title="Zoom out" class="icon tl-icon-zoomout" ng-click="decreaseZoom()"></a>
   </div>
 
   <div class="tl-toolbar-container" style="width: 100px; height: 20px;">
@@ -14,13 +14,13 @@
   </div>
 
   <div class="tl-toolbar-container">
-    <a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="setCurrentScaleLevel(getCurrentScaleLevel() + 1)"></a>
+    <a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="increaseZoom()"></a>
   </div>
 
 
   <div class="tl-toolbar-container">
     <form>
-      <select name="zooms" ng-model="currentScale" ng-options="timeline.i18n(Timeline.ZOOM_CONFIGURATIONS[scale].name) for scale in Timeline.ZOOM_SCALES">
+      <select name="zooms" ng-model="currentScaleName" ng-options="timeline.i18n(Timeline.ZOOM_CONFIGURATIONS[scale].name) for scale in Timeline.ZOOM_SCALES">
       </select>
     </form>
   </div>