CSS
<!DOCTYPE html>
<html ng-app="scheduleApp">
<head>
<title>AngularJs Schedule</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/angular.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/firebase.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<div class="page-header text-center">
<h1>Schedule City</h1>
</div>
<div class="row times">
<div class="col-xs-4 text-center">
<h2>{{day.name}}</h2>
<div class="time-slot" ng-repeat="slot in day.slots">
</div>
JavaScript
angular.module('programApp',['firebase'])
.controller('mainController', function($scope){
var ref = new Firebase("https://torrid-inferno-884.firebaseIO.com/days");
var fb = $firebase(ref);
var syncObject = fb.$asObject();
syncObject.$bindTo($scope,'days');
$scope.reset = function() {
fb.$set({
monday: {
name: 'Monday',
slots: {
0900: {
time: '9:00am',
booked: false
},
0110: {
time: '11:00am',
booked: false
}
}
},
tuesday: {
name: 'Tuesday',
slots: {
0900: {
time: '9:00am',
booked: false
},
0110: {
time: '11:00am',
booked: false
}
}
}
});
};
});
Error: [$injector:nomod] Module 'programApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.