Attorney SO Solution

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-app="myApp">
      <div ng-controller="attorneyCtrl as vm">
        <p>Name: {{vm.currentAttorney.name}}</p>
        
        <p>Practice Area</p>
        <ul>
          <li ng-repeat="area in vm.currentAttorney.areas">{{area}}</li>
        </ul>

        <p>What client says about this attorney:</p>
        <p ><i>&quot;{{vm.activeQuote.quote}}&quot;</i> - {{vm.activeQuote.person}}</p>
        
        
      </div>
    </div>
    
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <script src="script.js"></script>

  </body>

</html>

(function() {
    'use strict';
    
    angular.module('myApp', []);
}());

(function() {
    'use strict';

    angular.module('myApp')
        .value('pageSettings', {
            attorneyId : 1
        });
}());

(function() {
    'use strict';

    angular.module('myApp')
        .factory('dataSvc', dataSvc);
    
    dataSvc.$inject = ['$log', '$timeout'];
    function dataSvc($log, $timeout) {
        
        var data = {
            "attorneys": [
                {
                    "id":1,
                    "name":"Bob Smith",
                    "quotes":
                    [
                        { "id": 1, "quote": "Wonderful guy!", "person": "Dovie" },
                        { "id": 2, "quote": "If ye be wanting a haggis like no other, Bob be yer man!", "person": "Angus McLoed" },
                        { "id": 3, "quote": "Wotta Hottie!", "person": "Bob's wife" }
                    ],
                    "areas": ["altdispute", "litigation", "securities"]
                }
            ]
        };
        
        var practiceareas = {
            altdispute: "Alternative Dispute Resolution",
            businesscorp: "Businesses & Corporations",
            estateplanning: "Estate Planning",
            futures: "Futures & Derivatives",
            litigation: "Litigation",
            productliability: "Product Liability",
            realestate: "Real Estate",
            securities: "Securities"
        };
        
        var service = {
            getAttorneyById: getAttorneyById,
            getPracticeAreas: getPracticeAreas
        };
        
        return service;
        
        function getAttorneyById(id) {
            return $timeout(function() {
                var matches = data.attorneys.filter(function(a) {
                    return a.id === id;
                });
                
                if (matches.length === 1) {
                  var result = matches[0];
                  
                  result.areas = result.areas.map(function(a) {
                    return practiceareas[a];
                  });

                  return result;
                }
                return null;
            }, 250);
        }
        
        function getPracticeAreas() {
            return $timeout(function() {
                return practiceareas;
            }, 250);
        }
    }
}());

(function(undefined) {
    'use strict';
    
    angular.module('myApp')
        .controller('attorneyCtrl', attorneyCtrl);
    
    attorneyCtrl.$inject = ['$q', '$log', '$timeout', 'dataSvc', 'pageSettings'];
    function attorneyCtrl($q, $log, $timeout, dataSvc, pageSettings) {
        /* jshint validthis: true */
        var self = this;
        self.currentAttorney = undefined;
        self.activeQuote = undefined;
        self.practiceAreas = [];

        var activeQuoteIdx = 0;

        
        activate();
        
        function activate() {
            dataSvc
                .getPracticeAreas()
                .then(bindPracticeAreas)
                .then(getAttorneyDetails)
                .then(bindAttorney)
                .then(startFlippingQuotes);
        }

        function getAttorneyDetails() {
          return dataSvc
            .getAttorneyById(pageSettings.attorneyId);
        }
        
        function bindPracticeAreas(areas) {
            self.practiceAreas = areas;
        }
        
        function bindAttorney(attorney) {
          var dfd = $q.defer();
          self.currentAttorney = attorney;
          dfd.resolve(true);
          return dfd.promise;
        }
        
        function startFlippingQuotes() {
          if (!self.currentAttorney) return;
          
          self.activeQuote = self.currentAttorney.quotes[activeQuoteIdx];
          activeQuoteIdx = (activeQuoteIdx + 1) % self.currentAttorney.quotes.length;
          $timeout(startFlippingQuotes, 5000);
        }
    }
}());

/* Styles go here */