How-To: Getting Bootstrap-Notify working in my Angular page - angularjs

Question

The Hope:
I would like to use the Bootstrap Notify addon on my Angular page!
BootStrap Notify: here, and the github location
The Problem:
I can't for the life of me figure out how to get it working! I've tried about 12 (ok, maybe 6) ways of injecting the script, but not a one of them results in anything except errors!
The Code:
index.aspx:
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="tc" ContentPlaceHolderID="TitleContent" runat="server">
My awesome page!
</asp:Content>
<asp:Content ID="pc" ContentPlaceHolderID="PageContent" runat="server">
<div id="ng-app" ng-app="myAwesomePage" ng-view growl autoscroll></div>
</asp:Content>
<asp:Content ID="as" ContentPlaceHolderID="AdditionalScripts" runat="server">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/ui-bootstrap-tpls-0.8.0.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/jquery.bootstrap-growl.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/scripts/underscore-min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/ng-v4/ng-v4.js"></script>
<script type="text/javascript" src="/scripts/myAwesomePage/app.js"></script>
<script type="text/javascript" src="/scripts/myAwesomePage/controllers.js"></script>
<script type="text/javascript" src="/scripts/myAwesomePage/services.js"></script>
</asp:Content>
<asp:Content ID="ac" ContentPlaceHolderID="AdditionalContent" runat="server">
<style type="text/css">
.nav, .pagination, .carousel a {
cursor: pointer;
}
.pagination {
margin: 0 0 0 0 !important;
font-family: Helvetica, FontAwesome;
}
[ng-cloak] {
display: none;
}
label, form {
font-size: 10pt;
font-family: Verdana, Arial, Helvetica, Sans-serif;
}
</style>
</asp:Content>
app.js
"use strict";
angular.module("myAwesomePage", [
"ngRoute",
"ngResource",
"ui.bootstrap",
"v4",
"bootstrapNotify",
"myAwesomePage.controllers",
"myAwesomePage.services"]).
config(function ($routeProvider) {
//Main List
$routeProvider.when("/", {
templateUrl: "/content/myAwesomePage/index.html",
controller: "myAwesomePageCtrl",
controllerAs: "vm"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
The problem I'm running into is with this line:
"bootstrapNotify",
I can't figure out how to inject the directive, and every version of the name that I've tried results in this error:
which leads to this awesome and intimately descriptive page on the AngularJS website.
I've tried "bootstrap-notify", "bootstrapnotify", "bootstrapNotify", "notify", "Notify": all of them have failed and given the same error.
Help me, StackOverflow! You're my only hope!

Answer 1

Per #Claies answer above, it turns out that BootstrapNotify isn't an angular module, and thus would require a massive amount of effort to actually get working with an angular page. Turns out it's more of something for JQuery-driven pages.