Develop Reference

Unknown provider for $modalStackProvider while including ui-bootstrap

I'm trying to use ui-bootstrap for Tabs in my application keeping the example on ui-bootstrap's website as reference. For the same I included the js files given in the exapmle which are:
Angular.js, Animate.js, Sanitize.js and BootStrap-tpls.js
But after including these JS Files I'm shown an error:
[$injector:unpr] Unknown provider: $modalStackProvider <- $modalStack
I'm not able to resolve this dependency.

You have some version mismatch.
It used to be $modal, $modalInstance, etc. in old Angular Bootstrap.
Now it is $uibModal, $uibModalInstance, etc.
So check versions of libraries that depends on Angular Bootstrap.

Switching from ng-route to angular-ui-router

Since I needed nested views in my AngularJS application (1.4), I decided to switch routing library from ngRoute to ui.router.
Now everything seems to work fine but in some controller I still have to import ngRoute in order not to crash the application.
One of these contrller is the controller for the landing page:
angular.module(
'myApp.landing', ['ngRoute'], ["$compileProvider", function($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|whatsapp):/);
}]).
Here if I switch from 'ngRoute' to 'ui.router' I get this error:
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.10/$injector/modulerr?p0=myApp&p1=Error%3A%…Flocalhost%3A3003%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A274)
The problem is that the error does not really tell me much about what's going on and which part of my code still depend on the module ngRoute.
Do you have an idea about how to approach this problem?

How do I set up AngularJS intellisense on VS Code

I've been working on setting up Visual Studio Code specifically to work with a Angular 1.5 codebase that we have at work. Here's what I've done up to this point:
Installed TSD
Ran tsd query -r -o -a install angular -s
Add a reference at the top of my file to tsd.d.ts like so:
/// <reference path="../typings/tsd.d.ts" />
(function() {
'use strict';
angular.module('moduleName').controller('CtrlName',
['$scope', '$window',function ($scope, $window){
}
})();
At this point, it looks like I have partial success; when I hover over the angular keyword I see type-specific information (i.e. namespace angular, var angular: ng.IAngularStatic) but none of the type information is coming through in the angular specific dependencies, i.e. when I hover over $window, it tells me it is of any type.
My questions:
What more do I have to do to get intellisense to work properly?
Is there a way around having to add the reference at the top of every single JS file I have in the codebase to be able to get intellisense working?

After some digging around, I found that this used to be supported in VS Code once upon a time but support was lost in the latest versions. Source: https://github.com/Microsoft/vscode/issues/8163

AngularJS $UibModal triggering [$injector:unpr]

I'll keep this short.
I'm very new to angularjs and I'm following one of Pluralsights tutorials.
Since the release of the tutorial there are many deprecated built ins that are driving me nuts.
I'm trying to use the following code
angularFormsApp.controller("HomeController",
function ($scope, $location, $uibModal, DataService) {
$scope.showCreateEmployeeForm = function () {
//$location.path('/newEmployeeForm');
$uibModal.open({
templateUrl: 'app/EmployeeForm/efTemplate.html',
controller: 'efController'
});
})
The tutorial is showing to use $modal (which is now deprecated)... I've tried just using $uibModal instead, and when clicking the button, the event is not firing and I'm getting the following error
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24animateCssProvider%20%3C-%20%24animateCss%20%3C-%20%24uibModalStack%20%3C-%20%24uibModal
Oh - I also installed angular using NuGet so I have the latest release

The animateCssProvider is only available for angular 1.4+, and you're using 1.3.
From bootstrap UI website:
AngularJS (requires AngularJS 1.4.x or higher, tested with 1.5.3).
0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.
Just update your angular version.

Angular JS Module Injecting Error

Recently I have been using angular JS and it is great. However, I do not really understand the injection inside out. I have been using this pattern for almost every page and it works.
var workoutApp = angular.module('workoutApp', []);
workoutApp.controller('workoutControllers', ['$scope', '$http', '$window', function ($scope, $http, $window) {
//do something with $scope.
Now I want to implement auto complete using ngMaterial http://codepen.io/anon/pen/VeNqYB
The syntax are totally different from what I have been doing so I am really confused. I tried to inject module this way,
var workoutApp = angular.module('workoutApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
but kept getting error. Can anyone please share some thoughts on this?

According to the docs, ngMaterial has dependencies on more than just angular.
In the CDN example (https://github.com/angular/material#cdn), you can see the dependencies.
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
It sounds like the fix is as simple as adding these dependencies.
Related Issues
Installing Angular Material, "Failed to instantiate module ngMaterial" even though I'm using angular version 1.3.0