angular.module('modelDemo', []). config(function ($routeProvider) { $routeProvider. when('/', { controller: 'AuthorListCtrl', templateUrl: 'list.html' }). otherwise({ redirectTo: '/' }); }); angular.module('modelDemo').controller("AuthorListCtrl", ['$scope', function($scope) { $scope.list; var fowler = { name: "Fowler" }; var twain = { name: "Twain" }; var poe = { name: "Poe" }; var plato = { name: "Plato" }; 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."; fowler.quote = "Any fool can write code that a computer can understand. " + "Good programmers write code that humans can understand."; poe.quote = "Deep into that darkness peering, long I stood there, wondering, " + "fearing, doubting, dreaming dreams no mortal ever dared to dream before."; 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. "; $scope.list = [twain, fowler, poe, plato]; $scope.selectQuote = function(author) { $scope.selectedQuote = author.quote; $scope.selectedAuthor = author; } $scope.isSelected = function(author) { return author === $scope.selectedAuthor; } }]);
<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" readonly>{{selectedQuote}}</textarea> </div> </div > </script> </div>