AngularJS service

<section ng-app="app" class="container">
    <section ng-controller="appCtrl">
        <h3>List of countries</h3>
        <ul>
            <li ng-repeat="country in srvc.countriesList">
                {{country.name}} - {{country.capital}}
            </li>
        </ul>
 
        <h3>Add new country</h3>
        <p>Name:
            <input type="text" ng-model="newCountry.name" />
        </p>
        <p>Capital:
            <input type="text" ng-model="newCountry.capital" />
        </p>
        <p>
            <button ng-click="addCountry()">Add new country to the list</button>
        </p>
    </section>
</section>

<section ng-app="app" class="container"> <section ng-controller="appCtrl"> <h3>List of countries</h3> <ul> <li ng-repeat="country in srvc.countriesList"> {{country.name}} - {{country.capital}} </li> </ul> <h3>Add new country</h3> <p>Name: <input type="text" ng-model="newCountry.name" /> </p> <p>Capital: <input type="text" ng-model="newCountry.capital" /> </p> <p> <button ng-click="addCountry()">Add new country to the list</button> </p> </section> </section>

var app = angular.module('app', []);
 
app.factory('appSrvc', function () {
    return {
        // can use $http object to retrieve data in a "real" app
        countriesList: [{
            name: 'England',
            capital: 'London'
        }, {
            name: 'Germany',
            capital: 'Berlin'
        }, {
            name: 'Italy',
            capital: 'Rome'
        }, {
            name: 'Spain',
            capital: 'Madrid'
        }]
    };
});
 
app.controller('appCtrl', function ($scope, appSrvc) {
    $scope.srvc = appSrvc; // bind scope variable to service
 
    $scope.addCountry = function () {
        $scope.srvc.countriesList.push({
            name: $scope.newCountry.name,
            capital: $scope.newCountry.capital
        });
        $scope.newCountry = {}; // clean form
    }
});

var app = angular.module('app', []); app.factory('appSrvc', function () { return { // can use $http object to retrieve data in a "real" app countriesList: [{ name: 'England', capital: 'London' }, { name: 'Germany', capital: 'Berlin' }, { name: 'Italy', capital: 'Rome' }, { name: 'Spain', capital: 'Madrid' }] }; }); app.controller('appCtrl', function ($scope, appSrvc) { $scope.srvc = appSrvc; // bind scope variable to service $scope.addCountry = function () { $scope.srvc.countriesList.push({ name: $scope.newCountry.name, capital: $scope.newCountry.capital }); $scope.newCountry = {}; // clean form } });