ASP.NET mvc angularjs Unknown provider error

Question

I am playing with angular Chart and angular Select. Chart working well. After adding controller for select control i get error Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile. How to fix this error and why it's happening?

Index.cshtml

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;
    }
    li a {
        display: block;
        color: #000;
        padding: 8px 0 8px 16px;
        text-decoration: none;
    }
    li a:hover {
         background-color: #555;
         color: white;
    }
    .header {
        background: #f1f1f1;
        height: 120px;
        width: 100%;
        margin: 0;
    }
    td{
        vertical-align:top;
        width:33%;
    }
    .first-column{
        width:15%;
        float:left;
    }
    .second-column{
        width:40%;
        float:left;
    }
    .third-column {
        width: 45%;
        float: left;
    }
    .second-column table{
        padding:5px;
    }
</style>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css" />
<script src="~/Scripts/angular.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script src="~/Scripts/MyScripts/Chart.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="~/Scripts/angular-messages.min.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>

<div class="header"></div>


<div class="first-column">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>
<div class="second-column">
<table>
    <tbody>
        <tr>
            <td>
                <div class="test1">
                    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                    </button>
                    Test1
                    <div id="demo" class="collapse">
                        Test1
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="test2">
                    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo1">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                    </button>
                    Test2
                    <div id="demo1" class="collapse">
                        Test2
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>
<div class="third-column">
    <table>
        <tbody>
            <tr>
                <canvas id="line" class="chart chart-line" chart-data="data"
                        chart-labels="labels" chart-legend="true" chart-series="series"
                        chart-click="onClick"></canvas> 
            </tr>
            <tr>
                <div ng-controller="SelectOptGroupController" class="md-padding selectdemoOptionGroups" ng-cloak="">
                    <div>
                        <h1 class="md-title">Pick your pizza below</h1>
                        <div layout="row">
                            <md-input-container style="margin-right: 10px;">
                                <label>Size</label>
                                <md-select ng-model="size">
                                    <md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option>
                                </md-select>
                            </md-input-container>
                            <md-input-container>
                                <label>Topping</label>
                                <md-select ng-model="selectedToppings" multiple="">
                                    <md-optgroup label="Meats">
                                        <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
                                    </md-optgroup>
                                    <md-optgroup label="Veggies">
                                        <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
                                    </md-optgroup>
                                </md-select>
                            </md-input-container>
                        </div>
                        <p ng-if="selectedToppings">
                            You ordered a {{size.toLowerCase()}} pizza with
                            {{printSelectedToppings()}}.
                        </p>
                    </div>
                </div>
            </tr>
        </tbody>
    </table>

</div>


<script>
    $(document).ready(function () {
        $("#demo").on("hide.bs.collapse", function () {
            $(".test1 > .btn").html('<span class="glyphicon glyphicon-plus-sign"></span>');
        });
        $("#demo").on("show.bs.collapse", function () {
            $(".test1 > .btn").html('<span class="glyphicon glyphicon-minus-sign"></span>');
        });

        $("#demo1").on("hide.bs.collapse", function () {
            $(".test2 > .btn").html('<span class="glyphicon glyphicon-plus-sign"></span>');
        });
        $("#demo1").on("show.bs.collapse", function () {
            $(".test2 > .btn").html('<span class="glyphicon glyphicon-minus-sign"></span>');
        });
    });

</script>

Chart.js

var app = angular.module("myApp", ['chart.js', 'ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

app.controller("LineCtrl", function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
  [65, 59, 80, 81, 56, 55, 40],
  [28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
    console.log(points, evt);
};
});

app.controller('SelectOptGroupController', function($scope) {
$scope.sizes = [
    "small (12-inch)",
    "medium (14-inch)",
    "large (16-inch)",
    "insane (42-inch)"
];
$scope.toppings = [
  { category: 'meat', name: 'Pepperoni' },
  { category: 'meat', name: 'Sausage' },
  { category: 'meat', name: 'Ground Beef' },
  { category: 'meat', name: 'Bacon' },
  { category: 'veg', name: 'Mushrooms' },
  { category: 'veg', name: 'Onion' },
  { category: 'veg', name: 'Green Pepper' },
  { category: 'veg', name: 'Green Olives' }
];
$scope.selectedToppings = [];
$scope.printSelectedToppings = function printSelectedToppings(){
    // If there is more than one topping, we add an 'and' and an oxford
    // comma to be gramatically correct.
    if (this.selectedToppings.length > 1) {
        var lastTopping = ', and ' + this.selectedToppings.slice(-1)[0];
        return this.selectedToppings.slice(0,-1).join(', ') + lastTopping;
    }
    return this.selectedToppings.join('');
};
});

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="myApp" ng-controller="LineCtrl">
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

smushi · Accepted Answer · 2016-04-30 10:47:53Z

2

I've seen this before. For me it was angular.js and angular-animate.js versions were out of sync. You can try making sure both on same version.

answered Apr 30, 2016 at 10:47

smushi

7196 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET mvc angularjs Unknown provider error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related