Your First AngularJS App

Same Backbone application from http://tutorialzine.com/2013/04/services-chooser-backbone-js/ but in AngularJS

HTML

<link rel="stylesheet" href="http://demo.tutorialzine.com/2013/04/services-chooser-backbone-js/assets/css/style.css">
<script src="http://fonts.googleapis.com/css?family=PT+Sans:400,700"></script>
<form id="main" ng-app ng-controller="myservices">
<h1>My Services</h1>

<ul id="services">
	<!-- The services will be inserted here -->
    <li ng-repeat="service in services">
        <input type="checkbox" ng-model="service.selected" value="1" name="{{service.title}}">
            {{service.title}}<span>${{service.price}}</span>
        </input>
    </li>
</ul>

<p id="total">total: <span>${{total()}}</span></p>

    <input type="submit" id="order" value="Order"/>
</form>

JavaScript

function myservices($scope){
    $scope.services=[
        { title: 'web development', price: 200},
        { title: 'web design', price: 250},
        { title: 'photography', price: 100},
        { title: 'coffee drinking', price: 10}];
    $scope.total=function(){
        var t = 0;
        angular.forEach($scope.services, function(s){
            if(s.selected)
                t+=s.price;
        });
        return t;
    };
}