I have an array of jsons that have this structure:
[{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}]
I want to insert this jsons in this div:
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
And i iterate over the todo in todos that i get in this scope
Todos.get(12175507942)
.success(function(data) {
$scope.todos = data;
});
I get the data fine, however i can't seem to get the value playlist_name.
I print the data and i get this.
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
with, each object being:
$$hashKey:"005"
playlist_id:"0DAlm2gb8DrtyRSXEKw07h"
playlist_name:"Rocola On The Go"
__proto__:Object
the code for the Todos.get
angular.module('todoService', [])
// super simple service
// each function returns a promise object
.factory('Todos', ['$http',function($http) {
return {
get : function(id) {
return $http.post('/api/getPlaylists',{"id":id});
},
create : function(todoData) {
return $http.post('/api/todos', todoData);
},
delete : function(id) {
return $http.delete('/api/todos/' + id);
}
}
}]);
I show the controllers code:
angular.module('todoController', [])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all todos and show them
// use the service to get all the todos
Todos.get(12175507942)
.success(function(data) {
console.log(data);
$scope.todos = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createTodo = function() {
// validate the formData to make sure that something is there
// if form is empty, nothing will happen
if ($scope.formData.text != undefined) {
$scope.loading = true;
// call the create function from our service (returns a promise object)
Todos.create($scope.formData)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos = data; // assign our new list of todos
});
}
};
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteTodo = function(id) {
$scope.loading = true;
Todos.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.todos = data; // assign our new list of todos
});
};
}]);
And i will show the view page:
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optimize mobile viewport -->
<title>Node/Angular Todo App</title>
<!-- load bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<!-- load angular -->
<script src="js/controllers/main.js"></script>
<!-- load up our controller -->
<script src="js/services/todos.js"></script>
<!-- load our todo service -->
<script src="js/core.js"></script>
<!-- load our main application -->
</head>
<!-- SET THE CONTROLLER -->
<body ng-controller="mainController">
<div class="main-container">
<section>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<h4 class="uppercase mb16">Tus Playlists<br></h4>
<p class="lead mb80"><br></p>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
<p class="text-center" ng-show="loading">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
and here is the core.js
angular.module('scotchTodo', ['todoController', 'todoService']);
Your code is working fine as per the code given in OP.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.todos = [{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
</div>
Related
I'm trying to get ng-click from one of my views to work globally.
I started with this Plunker
and I've looked at these answers already:
ng-click not firing in AngularJS while onclick does
Angular ng-click not firing
AngularJS : ng-click not working
From what I can tell, all of these have a ng-click in the same controller whereas the function I'm trying to call is in a different controller, but it has $scope, so that function should be reachable anywhere if I'm not mistaken.
Relevant Code(sorry its alot):
index.html:
<!doctype html>
<html lang="en" ng-app="floorForceApp">
<head>
<meta charset="utf-8">
<title>Floor Force Web</title>
<link rel="stylesheet" href="floorForceApp.css" />
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <script src="floorForceApp.js" ></script> -->
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="header-bar/header-bar.module.js"></script>
<script src="header-bar/header-bar.component.js"></script>
<script src="cabinet-page/cabinet-page.module.js"></script>
<script src="cabinet-page/cabinet-page.component.js"></script>
<script src="checkout-page/checkout-page.module.js"></script>
<script src="checkout-page/checkout-page.component.js"></script>
<script src="floor-page/floor-page.module.js"></script>
<script src="floor-page/floor-page.component.js"></script>
<script src="home-page/home-page.module.js"></script>
<script src="home-page/home-page.component.js"></script>
<script src="wall-page/wall-page.module.js"></script>
<script src="wall-page/wall-page.component.js"></script>
</head>
<body>
<header-bar></header-bar>
<div ng-view></div>
</body>
</html>
app.module.js:
'use strict';
angular.module('floorForceApp', [
'headerBar',
'ngRoute',
'cabinetPage',
'checkoutPage',
'floorPage',
'homePage',
'wallPage'
]);
app.config.js:
'use strict';
angular.
module('floorForceApp').
config(['$routeProvider',
function config($routeProvider) {
$routeProvider.
when('/home', {
template: '<home-page></home-page>'
}).
when('/floors', {
template: '<floor-page></floor-page>'
}).
when('/cabinets', {
template: '<cabinet-page></cabinet-page>'
}).
when('/walls', {
template: '<wall-page></wall-page>'
}).
when('/checkout', {
template: '<checkout-page></checkout-page>'
}).
otherwise('/home');
}
]);
checkout-page.module.js(floor-page.module.js looks the same as this, except it references 'floorPage'):
'use strict';
angular.module('checkoutPage', [
'ngRoute'
]);
checkout-page.component.js (the function I'm trying call is in this file - $scope.addToCart) :
'use strict';
angular.
module('checkoutPage').
component('checkoutPage',{
templateUrl: 'checkout-page/checkout-page.template.html',
controller: function checkOutController($scope){
$scope.cart = [];
$scope.total = 0;
$scope.totalCount = 0;
$scope.addToCart = function(item,count){
if(!count) count = 1;
if($scope.cart.filter(function (e){ return e.itemNo === item.itemNo})){
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count + count;
}else{
$scope.cart.push(item);
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = 1;
}
$scope.total = parseFloat($scope.total + (item.itemPrice * count));
}
$scope.removeFromCart = function(item,count){
let workingItem = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo});
if(!count) count = 1;
if(workingItem){
workingItem[0].count = workingItem[0].count - count;
$scope.total = parseFloat($scope.total - (item.itemPrice * count));
}else{
//If No Item found, do nothing
}
}
$scope.checkOut = function(){
}
}
})
floor-page.component.js
'use strict';
angular.
module('floorPage').
component('floorPage',{
templateUrl: 'floor-page/floor-page.template.html',
controller: function headerBarController($scope,$http){
let self = this;
$http.get('/items/floorForceData.json').then(function(resp){
self.items = resp.data;
});
}
})
floor-page.template.html(this is where the ng-click is,second input tag):
<div>
<div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
<div class="container-fluid h-100" >
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
<input class="addAmount" type="number"/>
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input class="addToCartButton btn btn-success" ng-click="$scope.addToCart(item)" type="button"value="Add to Cart"/>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You are using components and therefore each $scope is isolated. From the docs:
Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in AngularJS it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.
The line ng-click="$scope.addToCart(item)" would not work anyway as you would need to access the function through the controller alias which defaults to $ctrl. So you would write something like $ctrl.addToCart(item).
If I were you I would continue to use components and restructure the app so that communication between components is explicit, either through input/output bindings, or through services.
Hope this helps
I am creating a small web app where I will show a chart of the top 10 popular TV shows. Then, When I go to the browser and inspect I get an error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=showProvider%20%3C-%20show%20%3C-%20MainController
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body ng-app="Top10App">
<div class="header">
<div class="container">
10
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<!--TODO: Loop through shows and display each one with this HTML-->
<!--ng-repeat="show in shows" -->
<div>
<div class="rank">{{$index + 1}}</div>
<h2 class="series"> {{ index.series }}</h2>
<p class="genre">{{ index.genre }} </p>
<p class="run-start"> {{ index.run_start }}</p>
<p class="description"> {{ index.description }} </p>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!-- Services -->
<script src="js/services/show.js"></script>
</body>
</html>
Javascript
MainController.js
app.controller('MainController', ['$scope', 'show', function ($scope, show) {
show.success(function(data) {
$scope.show = data;
});
}]);
show.js
app.factory('Top10App', ['$http', function($http){
return $http.get('shows.json')
.success(function(data){
return data;
})
.error(function(err){
return err;
});
}]);
You're defining your service name as 'Top10App', so that's the way you should access it, not by the file name.
['$scope', 'Top10App', function ($scope, Top10App) { ...
Top10App.success(...
First, do you created the module? You should has something like:
// app.js
angular.module('app', []);
// maincontroller.js
angular.module('app').controller('myController, ...', [.......]);
// factory.js
angular.module('app').factory(...)
You are trying to inject show as a dependency for your controller, but it doesn't look like that is defined anywhere. That's why your error is telling you that it's an unknown provider.
I'm guessing you're trying to use your Top10App factory, so you need to inject it as such
app.controller('MainController', ['$scope', 'Top10App', function ($scope, Top10App) {
Top10App.success(...)
}
I am able to console the result of the http call but when I bind it so that I can view on the html page I am unable to do it. Can someone help me with this? I am posting the controller code and the html below.
Controller code
//module
var weatherApp = angular.module('weatherApp',['ngRoute' , 'ngResource']);
//Routes
//http://api.openweathermap.org/data/2.5/forecast/daily?APPID=metric
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'pages/home.htm',
controller:'homeController'
})
.when('/forecast', {
templateUrl:'pages/forecast.htm',
controller:'forecastController'
});
});
//services
weatherApp.service('cityService' ,function() {
this.city ="San Jose, CA";
});
//controllers
weatherApp.controller('homeController' ,['$scope', 'cityService', function($scope , cityService) {
$scope.city = cityService.city;
$scope.$watch('city' , function () {
cityService.city = $scope.city;
});
}]);
$scope.city = cityService.city;
console.log($scope.city);
$http({
url: "http://api.openweathermap.org/data/2.5/forecast/daily?APPID==metric",
method: "GET",
params: {q: $scope.city, cnt:2}
}).then(function(response){
$scope.weatherResults = response.data;
console.log($scope.weatherResults);
});
}]);
HTML CODE For Index.htm
<!DOCTYPE html>
<html lang="en" ng-app="weatherApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/navbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="#">Accurate Weather</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- NAVBAR ENDS-->
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Code for Forecast.html
Forecast for {{city}} <!-- THIS WORKS -->
{{ weatherResult.cnt }} <!-- THIS DOES NOT WORK -->
Code for home.htm (EVERYTHING WORKS FINE HERE JUST POSTING FOR THE SAKE OF CLARITY)
<div class = "row">
<div class = "col-md-6 col-md-offset-3">
<h4>Forecast by city</h4>
<div class="form-group">
<input type="text" ng-model="city" class="form-control" />
</div>
Get forecast
</div>
</div>
console output correctly displays the objects:
Maybe try and initialize $scope.weatherResult as an empty object in your controller so that AngularJS can watch it correctly.
Just put this assigning inside $scope.apply to notify angular engine that data was changes asynchronously so it should be processed correctly
$scope.$apply(function () {
$scope.weatherResult = response.data; //IF I LOG THIS IT WORKS
});
Also good to add check that gigest cycle is not in progress now
if(!$scope.$$phase) {
//$digest or $apply
}
Angular's inbuilt 2-way data binding does not work on http responses which is a known issue. Use $timeout to manually kick in the 2-way data binding and thereby initiating the digest cycle.
$scope.getWeather= function(){
$http({
url: "http://api.openweathermap.org/data/2.5/forecast/daily?AP&units=metric",
method: "GET",
params: {q: $scope.city, cnt:2}
})
.then(function(response){
$timeout(function(){
$scope.weatherResult = response.data;
}, 0);
});
}
}]);
Note the $timeout timer is set at 0ms to immediately kick in the digest cycle.
Correct Code posted. I was assigning the http get call to $scope.variable, I just removed it and it started working. Thanks
I'm creating an application that has two boxes. On the left div it will display a list of clickable links, once clicked it will display that links information on the div to the right. I've managed to get my data to hide and show when the link is clicked but only within the same div. What's the best appraoch when it comes to doing this with Angular?
<div class="row" ng-controller="faqController">
<div class="col-md-6">
<div class="col-md-12">
<div class="guide-section">
<h1>Select a Topic</h1>
<ul ng-repeat="faq in faqs">
<li>{{ faq.title }}</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="guide-section">
<div ng-repeat="faq in faqs">
<h1>{{ faq.title }}</h1>
<p>{{ faq.info }}</p>
</div>
</div>
</div>
</div>
Angular:
var myApp = angular.module('supportApp', ['ngRoute', 'ngResource']);
myApp.controller('faqController', ['$scope', '$http', function($scope, $http) {
$scope.showData = true;
$http.get('data/faq.json').
success(function(data, status, headers, config) {
$scope.faqs = data;
//console.log(data);
}).
error(function(data, status, headers, config) {
//Complete error fallback
});
}]);
you should add to your second div ng-show='showdata' - another option would be to show if $scope.showFaq is populated, which would eliminate dealing with another variable
Also, you ng-repeat should be in your li not ul - ng-repeat should be on the element you want to repeat (unlike most for loops in other languages)
Once you populate the $scope.faqs, the list will show with the links.
Once you click the selected faq, it is used to populate the $scope.showFaq and $scope.showData is set to true...
// main.js
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.showData = false;
$scope.showHide = function(faq) {
$scope.showData = true;
$scope.showFaq = faq;
};
$scope.faqs = [
{'title': 'title 1', 'info': 'info 1'},
{'title': 'title 2', 'info': 'info 2'}
];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="col-md-6">
<div class="col-md-12">
<div class="guide-section">
<h1>Select a Topic</h1>
<ul>
<li ng-repeat="faq in faqs"><a ng-click="showHide(faq)">{{ faq.title }}</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="guide-section" ng-show="showData">
<h1>{{ showFaq.title }}</h1>
<p>{{ showFaq.info }}</p>
</div>
</div>
</body>
</html>
Right I've got a really dumb one for you, and I've been looking at this code all day with no result.
I have a simple textbox which goes through a controller and updates a variable inside a service (The service will eventually fetch/update data from somewhere else).
At the moment, I am able to retrieve the variable value all the way to the view and it works, but the textbox is unable to update the variable inside the service in order to then display the new variable value in the view again....
I really appreciate any help and hope I have made sense!!!
// APP/APP.JS
(function(){
var app = angular.module('appMod', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'introController',
templateUrl: 'app/partials/intro.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('nameController', function($scope, dataService) {
var nameValue;
this.name = dataService.getName();
this.submitName = function(nameVal) {
nameValue = this.nameCtrl.nameVal;
dataService.setName(nameValue);
};
});
app.controller('introController', function($scope, dataService) {
this.name = dataService.getName();
});
app.service('dataService', function () {
var name = "f";
this.getName = function() {
return name;
};
this.setName = function(nameVal) {
name = nameVal;
};
});
})();
<!-- INDEX.HTML -->
<!DOCTYPE html>
<html ng-app="appMod">
<head>
<link rel="stylesheet" type="text/css" href="content/css/normalize.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/style.css">
<link rel="stylesheet" type="text/css" href="content/css/animation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-timer.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="nameController as nameCtrl">
<img src="content/images/sitelogo.png" class="logo">
<h2 class="welcomeMessage fade">Welcome <span class="fade" ng-show="!nameCtrl.name == ''">{{nameCtrl.name}}</span><span class="inline fade" ng-hide="nameCtrl.name !== ''">Friend</span> <small>(We like to get personal!)</small></h2>
<div class="namebox fade">
<h2>Welcome <small class="fade">Please type your name</small></h2>
<form class="fade">
<div class="form-group">
<input type="text" class="form-control" ng-model="nameCtrl.nameVal" autofocus>
</div>
<button type="submit" style="width:100%;" class="btn btn-default fade" ng-click="nameCtrl.submitName()" >Submit</button>
</form>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
You need to be binding to name and not nameVal on your input
Then just pass that in your setName call, i don't think the rest of the code is needed in there, you can get rid of the nameValue var too.
this.submitName = function() {
dataService.setName(this.name);
};
The nameValue var is local to the controller and not available on the $scope to bind to your view, so even though you were changing it, the view didn't know about it as it couldn't see that var.