AngularJS Binding doesn't seem to work

Question

I'm fairly new to Angular, and a simple binding doesn't work for me.

It just shows me {{ trip.name }} and {{trip.created}} just as they're written.

My controller:

(function () {
    "use strict";
    angular.module("app-trips")
        .controller("tripsController", tripsController);

    function tripsController() {
        var vm = this;
        vm.trips = [{
            name: "US Trip",
            created: new Date()
        }, {
            name: "World Trip",
            created = new Date()
        }];

A part of my class:

@section Scripts {
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="~/js/app-trips.js"></script>
    <script src="~/js/tripsController.js"></script>
}
<div class="row" ng-app="app-trips">

    <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3">
        <table class="table table-responsive table-striped">
            <tr ng-repeat="trip in vm.trips">
                <td>{{ trip.name }}</td>
                <td>{{ trip.created }}</td>
            </tr>
       </table>
    </div>

the view of the controller:

(function () {
    "use strict";
    angular.module("app-trips", ['ngSanitize']);
})();

BTW - supposedly according to the course I'm following, I don't need ['ngSanitize'] yet, but without it it doesn't even show the DIV s.

EDIT : as @jellyraptor noticed , I had a typo with = instead of :

EDIT 2 :

It was the typo + the [ ngSanitize ] which I really didn't needed. I fixed the typo and passed an empty array and everything works. Thanks all

Answer 1

Because you are using controllerAs syntax and here the variable is vm . so for access scope object use vm instead of tripsController

<tr ng-repeat="trip in vm.trips">
    <td>{{ trip.name }}</td>
    <td>{{ trip.created }}</td>
</tr>

 (function() { "use strict"; angular.module("app-trips", []); })(); angular.module("app-trips") .controller("tripsController", tripsController); function tripsController() { var vm = this; vm.trips = [{ name: "US Trip", created: new Date() }, { name: "World Trip", created: new Date() }]; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> <div ng-app="app-trips" ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3"> <table class="table table-responsive table-striped"> <tr ng-repeat="trip in vm.trips"> <td>{{ trip.name }}</td> <td>{{ trip.created }}</td> </tr> </table> </div> 

Answer 2

Either Angular isn't loading or it is encountering an error. Bring up the dev tools with F12 and see if there are errors in the console. Also in the console, you can type 'angular' and hit enter and if it reports that angular is undefined then angular is not loading properly.

Answer 3

You put an equals sign in your trips array's second object's 'created' attribute.

vm.trips = [{
    name: "US Trip",
    created: new Date()
}, {
    name: "World Trip",
    created = new Date()
}];

should be

vm.trips = [{
    name: "US Trip",
    created: new Date()
}, {
    name: "World Trip",
    created: new Date()
}];