How do I implement a changing backgroundcolour with Javascript/ AngularJS?

Question

I try to implement an changing backgroundcolour into a view of my Ionic-Application.

(Ionic Version: 1.3.1 (ionic -v : 1.7.16, Angluar.js Version: 1.5.3)

One view of that application has this 'changing backgroundcolour' implemented already, but this works just for a fixed amount of e.g. 5 values. Because it uses an Array which contains all rgba-Values for these specific values.

Now I want to use a different and not fixed amount of values. So I can have a transfer parameter to a function which checkts this transfer parameter. When the parameter is lower than a minimum, the backgroundcolour should change to 'rgba(123, 236, 245, 1.00)' with an transition. And when the parameter is higher than a maximum the backgroundcolour should change to 'rgba(153, 0, 0, 1.00)'. The minimum and maximum should be variable, too. Also an important fact is, that the difference of the minimum an maximum is not allways 5. Otherwise I could use my Array.

For this propose I tried
document.body.style.backgroundColor = 'rgba(123, 236, 245, 1.00)'; But I didn't find a way to implement a transition to it.

Another approach was to use a CSS tansition like in Transition of background-color but I don't habe a specific time for the transition just an "end-value".

No I hope, that somebody can help me.

Here is the code of my Array:

.factory('Colourdata', function ColourdataFactory(Limitdata) {
var svc = this;

//default werte
svc.min = 50;
svc.max = 55;

var colours = new Array(5);

coloursDB [0] = 'rgba(123, 236, 245, 1.00)'; 
coloursDB [1] = 'rgba(123, 236, 245, 0.90)'; 
coloursDB [2] = '#ffffff';                
coloursDB [3] = 'rgba(153, 0, 0, 0.90)';
coloursDB [4] = 'rgba(153, 0, 0, 1.00)';


return {
  getColour: function (wert) {
    if (wert <= svc.min) {
      return colours[0];
    } else if (wert >= svc.max) {
      return colours[(svc.max - svc.min)];
    } else {
      return colours[wert - svc.min];
    }
  }
}
});