AngularJS, objects attached to $scope won't bind to html element

Question

I have 3 files: EventDetails.html, app.js, and EventController.js.

Here is the body of the html

<html ng-app="eventsApp">
 <head>...</head>
<body>
<div class="container">
    <div ng-controller="EventController">
    {{event.name}}</div>
</div>
</body>
</html>

app.js:

var eventsApp = angular.module('eventsApp', []);

EventController.js:

eventsApp.controller('EventController',
    function EventController($scope) {
        $scope.event = {
            name: 'Angular',
            date: '2/23/16',
            time: '11:22 am'
        };
    });

when I run it, the view displays "{{event.name}}" and not "Angular". If everything looks like it should work, then I probably have an issue with my links in html to the JS pages.

Here it is in Plunker http://plnkr.co/edit/T7Hexx9GEbp63eDxwCLE?p=preview

when you see {{event.name}} it is usually an indicator that there was an error. Have you checked the console to see if there are any? — yvesmancera
– yvesmancera, Commented Feb 23, 2016 at 17:39
thanks charlietfl, I just didn't show it here but I did have ng-app in the html tag — jhhoff02
– jhhoff02, Commented Feb 23, 2016 at 17:42

danday74 · Accepted Answer · 2016-02-23 18:38:07Z

1

ive fixed it

on your plunker your script tags in head are very wrong

you need to point to angular and you need to point to your js files

ive changed them to ...

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<script src="script.js"></script>
<script src="EventController.js"></script>

and i changed the EventController file too ...

eventsApp.controller('EventController',
    function($scope) {  // NO NEED FOR FUNCTION NAME HERE
        $scope.event = {
            name: 'Angular',
            date: '2/23/16',
            time: '11:22 am'
        };
    });

job done

plunk of fix ... http://plnkr.co/edit/tkPrhZcxzTlLzLg6f65C?p=preview

hopefully u can view that

answered Feb 23, 2016 at 18:38

danday74

57.9k56 gold badges272 silver badges337 bronze badges

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

Collectives™ on Stack Overflow

AngularJS, objects attached to $scope won't bind to html element

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