diff --git a/src/js/datetimepicker.js b/src/js/datetimepicker.js
index 4d4dcea1..9af8f183 100644
--- a/src/js/datetimepicker.js
+++ b/src/js/datetimepicker.js
@@ -136,7 +136,8 @@
         '</table></div>',
         scope: {
           onSetTime: '&',
-          beforeRender: '&'
+          beforeRender: '&',
+          dependOn: '=?'
         },
         replace: true,
         link: function link(scope, element, attrs, ngModelController) {
@@ -158,6 +159,14 @@
             return moment.utc(unixDate).year(startYear).startOf('year');
           };
 
+          //only watch if dependOn exists
+          if(scope.dependOn){
+            scope.$watch('dependOn', function(){
+                //if dependent value change, re-render the directive.
+                ngModelController.$render();
+            });
+          }
+
           var dataFactory = {
             year: function year(unixDate) {
               var selectedDate = moment.utc(unixDate).startOf('year');
diff --git a/test/configuration/beforeRender.spec.js b/test/configuration/beforeRender.spec.js
index 89e8ce59..19d73eb6 100644
--- a/test/configuration/beforeRender.spec.js
+++ b/test/configuration/beforeRender.spec.js
@@ -31,6 +31,44 @@ describe('beforeRender', function () {
   });
 
   describe('called before a new view is rendered', function () {
+
+    it('in year view $dates after dependent date are not selectable', function () {
+
+      $rootScope.date = moment('2008-01-01T00:00:00.000').toDate();
+      $rootScope.otherDateModel = moment('2009-01-01T00:00:00.000').toDate();
+
+      $rootScope.beforeRender = function (dates) {
+        expect(dates.length).toBe(12);
+        dates.map(function (current) {
+          //make not selectable after the dependent date
+          current.selectable = moment(new Date(current.utcDateValue)).isBefore(moment($rootScope.otherDateModel));
+        });
+      };
+
+      spyOn($rootScope, 'beforeRender').and.callThrough();
+
+      var element = $compile('<datetimepicker data-ng-model=\'date\' data-before-render=\'beforeRender($dates)\' data-datetimepicker-config="{ startView: \'year\', minView: \'year\' }" data-depend-on="otherDateModel"></datetimepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var selectedElement = jQuery(jQuery('.year', element)[2]);
+
+      expect(selectedElement.hasClass('disabled')).toBeFalsy();
+      selectedElement.trigger('click');
+      expect($rootScope.date).toEqual(moment('2001-01-01T00:00:00.000').toDate());
+
+      $rootScope.otherDateModel = moment('2005-01-01T00:00:00.000').toDate();
+      $rootScope.$apply();
+
+      var disabledElement = jQuery(jQuery('.year', element)[10]);
+
+      expect(disabledElement.hasClass('disabled')).toBeTruthy();
+      disabledElement.trigger('click');
+      expect($rootScope.date).toEqual(moment('2001-01-01T00:00:00.000').toDate());
+
+      expect($rootScope.beforeRender).toHaveBeenCalled();
+
+    });
+
     it('in year view $dates parameter contains 12 members', function () {
 
       $rootScope.date = moment('2008-01-01T00:00:00.000').toDate();
diff --git a/test/view/zh_cn/hour.spec.js b/test/view/zh_cn/hour.spec.js
index 7ba1b14b..b854286e 100644
--- a/test/view/zh_cn/hour.spec.js
+++ b/test/view/zh_cn/hour.spec.js
@@ -75,7 +75,7 @@ describe('hour view with initial date of "2020-01-01T00:00:00.000", minView="hou
     var selectedElement = jQuery(jQuery('.hour', element)[3]);
     selectedElement.trigger('click');
 
-    expect(jQuery('.active', element).text()).toBe('凌晨3点00');
+    expect(jQuery('.active', element).text()).toBe('凌晨3点00分');
     expect($rootScope.date).toEqual(moment('2020-01-01T03:00:00.000').toDate());
   });
 });
diff --git a/test/view/zh_cn/minute.spec.js b/test/view/zh_cn/minute.spec.js
index 4ee7a541..308edbf0 100644
--- a/test/view/zh_cn/minute.spec.js
+++ b/test/view/zh_cn/minute.spec.js
@@ -44,7 +44,7 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
     $rootScope.$digest();
   }));
   it('has `.switch` element with a value of 2013-Jan-22 0:00', function () {
-    expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨12点00');
+    expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨12点00分');
   });
   it('has 12 `.minute` elements', function () {
     expect(jQuery('.minute', element).length).toBe(12);
@@ -53,7 +53,7 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
     expect(jQuery('.active', element).length).toBe(1);
   });
   it('`.active` element with a value of 0:00', function () {
-    expect(jQuery('.active', element).text()).toBe('凌晨12点00');
+    expect(jQuery('.active', element).text()).toBe('凌晨12点00分');
   });
 });
 
@@ -70,21 +70,21 @@ describe('minute view with initial date of 2013-01-22 1:15', function () {
     $rootScope.$digest();
   }));
   it('has `.switch` element with a value of 2013-Jan-22 1:00', function () {
-    expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨1点00');
+    expect(jQuery('.switch', element).text()).toBe('2013年1月22日凌晨1点00分');
   });
   it('has 4 `.minute` elements', function () {
     expect(jQuery('.minute', element).length).toBe(4);
   });
   it('has 1 `.active` element with a value of 1:15', function () {
-    expect(jQuery('.active', element).text()).toBe('凌晨1点15');
+    expect(jQuery('.active', element).text()).toBe('凌晨1点15分');
   });
   it('changes date/time to 1:00 to when clicking first `.minute` element with a value of 0:00', function () {
-    expect(jQuery('.active', element).text()).toBe('凌晨1点15');
+    expect(jQuery('.active', element).text()).toBe('凌晨1点15分');
 
     var selectedElement = jQuery(jQuery('.minute', element)[0]);
     selectedElement.trigger('click');
 
-    expect(jQuery('.active', element).text()).toBe('凌晨1点00');
+    expect(jQuery('.active', element).text()).toBe('凌晨1点00分');
     expect($rootScope.date).toEqual(moment('2013-01-22T01:00:00.000').toDate());
   });
 });