angular directive replace newline with html

angular directive replace newline with html

I am using a service to retrieve data which binds to the html like this
{{order.Notes}}
order.Notes may contain multi-line text so i would like to format it using
html tags 'br'
This is the directive i'm trying to use:
angular.module('directives', [])
.directive('htmlText', function () {
return {
restrict: 'E',
template: '<div ng-bind-html-unsafe="html"></div>',
scope: {
text: '='
},
link: function (scope, elem, attrs) {
var updateText = function () {
if (scope.text != null) {
scope.html = scope.text.replace('\n', "<br/>");
}
};
scope.$watch('text', function (oldVal, newVal) {
if (newVal) {
updateText();
}
});
}
};
});
<html-text text="order.Notes"></html-text>
however, newVal is always null. what am i missing here?