angular.module('modelDemo', []). config(function ($routeProvider) { $routeProvider. when('/', { controller: 'AuthorListCtrl', templateUrl: 'list.html' }). otherwise({ redirectTo: '/' }); }); angular.module('modelDemo').controller("AuthorListCtrl", ['$scope', 'authorListModel', function($scope, authorListModel) { $scope.list = authorListModel.list; $scope.selectQuote = function(author) { authorListModel.setSelectedAuthor(author); }; $scope.isSelected = function(author) { return author === authorListModel.selectedAuthor; }; $scope.$on('authorModel::selectedAuthorUpdated', function(event) { $scope.selectedAuthor = authorListModel.selectedAuthor; }); }]); angular.module('modelDemo').controller("QuoteTextCtrl", ['$scope', function($scope) { $scope.$on('authorModel::selectedAuthorUpdated', function(event, author) { $scope.quote = author.quote; }); }]); angular.module('modelDemo').service("authorListModel", ['$rootScope', function($rootScope) { var fowler = { name: "Fowler", quote: "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." }, twain = { name: "Twain", quote: "Why, I have known clergymen, good men, kind-hearted, liberal, sincere, and all that, who did not know the meaning of a 'flush.' It is enough to make one ashamed of one's species." }, poe = { name: "Poe", quote: "Deep into that darkness peering, long I stood there, wondering, fearing, doubting, dreaming dreams no mortal ever dared to dream before." }, plato = { name: "Plato", quote: "All things will be produced in superior quantity and quality, and with greater ease, when each man works at a single occupation, in accordance with his natural gifts, and at the right moment, without meddling with anything else. " }; this.list = [fowler, twain, poe, plato]; this.selectedAuthor = null; this.setSelectedAuthor = function(author) { if(this.list.indexOf(author) > -1) { this.selectedAuthor = author; $rootScope.$broadcast('authorModel::selectedAuthorUpdated', author); } }; }]);
<div ng-app="modelDemo"> <div ng-view></div> <!-- CACHE FILE: list.html --> <script type="text/ng-template" id="list.html"> <div class = "row options"> <div class="large-2 columns options"> <a ng-repeat="author in list" ng-click="selectQuote(author)" class="{{isSelected(author) && 'selected' || ''}}">{{author.name}}</a> </div> <div class="large-10 columns end padtop"> <textarea name="quotetext" id="quotetext" ng-controller="QuoteTextCtrl" readonly>{{quote}}</textarea> </div> </div > </script> </div>