Angular - I want the background of the body/html to change (transition slowly) to a random color when clicking a specific button

How can I change the CSS styling of a different object than the one that is clicked. Also, how can I animate it? I can do this using jQuery but not with Angular. Note: I have a list of colors and a $scope.randomColor that is a Math.random of that array.

Here is a jQuery example of what I want the page to do: link.

<div class="question-text">
  <h2>Home Page</h2>
  Do you want to know the best country to travel to for your budget, tastes, and preferences?<br />
  <button ui-sref="q1" ng-click="changeColor()">Let's Get Started</button>
</div>

in controller:

  var colors = ['#FF4D63', '#3848AC', '#513584', '#9D4075', '#4D7AFF', '#875EEF', '#525561'];

  $scope.changeColor = function() {
    var randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.getElementByClass(".question-text").style.backgroundColor = randomColor;
  };

I'm also getting this error on the click:TypeError: document.getElementByClass is not a function at r.$scope.changeColor