David Shaw David Shaw - 4 months ago 22
AngularJS Question

Simple example can't access scope

I am trying to learn AngularJS, and going through an older tutorial I have built out a simple app. It has an index.html and two partial views which are loaded via ui-router. I know it's not separated into different files -- this is a learning project only.

The problem is that $scope does not seem to be available in View1 or in its called JS function , so

doesn't seem to find anything to display, and
cannot see $scope.newCustomer.name. I am sure that I am missing something simple.


<!DOCTYPE html>
<html ng-app="demoApp">

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="js/angular/angular.js"></script>
<script src="js/angular-ui-router/angular-ui-router.js"></script>
<!-- your app's js -->

var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies

// routes
demoApp.config(function($stateProvider, $urlRouterProvider) {
var nameState = {
name: 'name',
url: '/view1',
controller: 'SimpleController',
templateUrl: 'partials/View1.html'

var cityState = {
name: 'city',
url: '/view2',
controller: 'SimpleController',
templateUrl: 'partials/View2.html'



// controller

demoApp.controller("SimpleController", function ( $scope, $log ) {
$scope.log = $log;

$scope.customers = [{name: 'John Doe', city:'New York'},
{name: 'Jake Smith', city:'Atlanta'},
{ name: 'Jane Doe', city:'San Francisco'}];

$scope.addCustomer = function () {
$log.log("Add customer");
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}


<!-- placeholder for views inserted by ui-router -->



<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}}
<div class="container">
<h3> Loop </h3>
<li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li>
<br /> Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br /> Customer City:
<input type="text" ng-model="newCustomer.city" />
<br />
<br />
<button ng-click="addCustomer()">Add Customer</button>
<a href="#/view2">Switch to View 2</a>


Use only

ng-repeat="cust in customers"