AngularJS Поведение App Bizzarre: неизвестное поведение при инициализации

Question

У меня есть приложение AngularJS, но со следующим кодом происходит странное поведение:

my. html

<div ng-controller="DashboardController">
    <div id="tooltip" display="none" style="position: absolute; display: none;"></div>
</div>

my. js

app.controller('DashboardController', function ($rootScope, $scope, $http, $timeout, $compile, $routeParams) {
$scope.MouseMove = function ($event) {
    angular.element( document.querySelector( 'tooltip' ) );
    var title = $event.target.attributes.title.value;

    tooltip.innerHTML = title;
    tooltip.style.display = "block";
    tooltip.style.left = ($event.pageX - 250) + 'px';
    tooltip.style.top = ($event.pageY - 50) + 'px';
}
});

Странное поведение

Я не понимаю, как работает вышеуказанный код, так как я не инициализирован объект tooltip в функции MouseMove. Но когда я делаю это:

let tooltip = angular.element( document.querySelector( 'tooltip' ) );

код завершается ошибкой и утверждает, что объект tooltip не определен.

Почему это?!?