Change background DIV depending on the time of day

I think you'd be better served with ngClass in this case, so you don't have to remember where those styles are coming from if you want to update an image location for example. And, of course, both ngClass and ngStyle are directives, so they are the right place to do DOM manipulation in AngularJS, as stated @daniel-beck.

Here's an example of how to use ngClass:

var app = angular.module('demo', []);

app.controller('MyTimeCtrl', function($scope){
    var h = new Date().getHours();
    if (h <= 18) {
      $scope.time="day";
    } else {
      $scope.time="night";
    }
  
});

.main {
  height: 100vh;
  min-height: 100px;
}
.night {
  background-color: black;
  color: white;
}
.day {
  background-color: yellow;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="MyTimeCtrl" class="main" ng-class="time">
    <p>It's {{time}}!</p>
  </div>
</div>

Angular requires a completely different mindset from what you're used to -- instead of drawing the DOM and then digging around in it with e.g. getElementById to find elements and Do Stuff to them, you create directives which, when rendered in the DOM, Do Stuff to themselves.

So for this example you'd do something like

.directive('myHeaderItem', function () {
    return {
        template: '<div style="background-image: url({{bgImage}})">...</div>',
        link: function (scope, element) {

        var h = new Date().getHours();
        var i;

        if (h < 06) i = "night.jpg";
        else if (h < 11) i = "sunrise.jpg";
        else if (h < 18) i = "sunny.jpg";
        else if (h < 21) i = "sunset.jpg";
        else i = "night.jpg";

        scope.bgImage = i; // to pass values to the directive template, attach them to scope
    };
})

...and then in your HTML you would just include <div my-header-item></div>.

Followup: As jme11 pointed out in comments, a better coding style would have been to set a css class from within the directive, rather than an image URL, i.e. have your directive template be '<div class="{{foo}}">' (setting foo to the css classname that draws the background image you want.)

Alternatively, you could move more of the logic into the template itself rather than the directive (it wouldn't make much sense to do this in this case but for completeness' sake here's how you would do it:)

.directive('myHeaderItem', function () {
    return {
        template: '<div ng-class="{
            'sunrise': h>=6 && h<11, 
            'sunny': h>=11 && h<18, 
            'sunset': h>=18 && h<21,
            'night': h>=21 || h<6
        }">...</div>', // will result in i.e. <div class="sunny">...</div>
        link: function (scope, element) {
        scope.h = new Date().getHours();
    };
})