How to destroy controller in emberjs using ui slider

Ember 1.13.9

I have a controller

import Ember from 'ember';
export default Ember.Controller.extend({
  centi: 0,
  milli: 0,
  milliCentiChanged: function(){
    let total = Number(this.get('centi'))*10 + Number(this.get('milli');
    this.set('content.object.measurement',total);
  }.observers('centi','milli'),
});

The template associated with this controller has two sliders Ui slider ember

{{ui-slider value=centi min=0 max=100 step=1 orientation='horizontal' defaultValue=0
            tooltip='show' disabled=false handle='round' selection='before'
            tooltipPosition='top'
            changed='centiChanged'
          }}


{{ui-slider value=milli min=0 max=100 step=1 orientation='horizontal' defaultValue=0
            tooltip='show' disabled=false handle='round' selection='before'
            tooltipPosition='top'
            changed='milliChanged'
          }}

I see two sliders one for centi and one for milli.

after making changes to model ( complex form with many relationships). when i transition to another route and then come back to same page i see sliders a 0 positions but value of milli and centi is not destroyed.

so what I did was add override willDestroy in action of controller

actions: {
  willDestroy: function(){
   this.set('milli',null); 
   this.set('centi',null);
  }
}

The problem with this willDestroy hook is CONTROLLER is that the observers gets fired and I end up with value 0/garbage in my model "mesurement property.

I am not sure what I am doing wrong.