Labels rendering outside of map instead of inside overlay container in angular

[cameronstiffler]

Everything else in my marker seems to work but the label/message div renders on the page outside of the maps further up the page. I noticed there is an empty overlay container within the map that is empty. I am guessing this is the node my label/message is supposed to get attached to but doesn't. I get the following error. I read something about the node type being incorrect but don't know how to solve this in angular.

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at Pm.k.Ok (ol.js:400)
at Pm.b (ol.js:15)
at Pm.Na.b (ol.js:18)
at Va (ol.js:20)
at Pm.k.set (ol.js:20)
at Pm.k.pi (ol.js:402)
at new Pm (ol.js:399)
at createOverlay (angular-openlayers-directive.min.js:31)
at Object.fn (angular-openlayers-directive.min.js:31)
at Scope.$digest (angular.js:14412)

Code:

(function () {
'use strict';

angular
    .module('app.map', ['openlayers-directive'])
    .controller('MapController', MapController);

MapController.$inject = ['userAPI', '$scope'];
/* @ngInject */
function MapController (userAPI, $scope) {
    var vm = this;
    vm.message = 'This is london';
    console.log($scope);
    console.log(vm);
    angular.extend(vm, {
            center: {
                lat: 51.505,
                lon: -0.09,
                zoom: 15
            },
            marker: {
                lat: 42.880596200000010000,
                lon: -8.544641200000001000,
                label: {
                    id: 'label',
                    message: '<strong>Santiago de Compostela</strong>',
                    show: true,
                    showOnMouseOver: true
                }
            }
        });
}

})();

Any suggestions would be appreciated.

[cameronstiffler]

Turns out I wasn't using OL3. Solved.