Learn AngularJS coursera Assignment 3
<p>For this part of the assignment, I need to show a list of leaders with jpegs, descriptions, yada yada yada. What I'm getting is an empty row; nothing indicating that there is anything in that row.</p>

<p>What I have done...</p>

<p>I included a factory that returns the list of leaders...</p>

<p>services.js</p>

<pre><code>.factory('corporateFactory', function() {
var corpfac = {};

        var leadership = [
            {
                name: "Peter Pan",
                image: 'images/alberto.png',
                designation: "Chief Epicurious Officer",
                abbr: "CEO",
                description: "Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which The Frying Pan became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections."
            },
            {
                name: "Dhanasekaran Witherspoon",
                image: 'images/alberto.png',
                designation: "Chief Food Officer",
                abbr: "CFO",
                description: "Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, Everything that runs, wins, and everything that stays, pays!"
            },
            {
                name: "Agumbe Tang",
                      image: 'images/alberto.png',
                designation: "Chief Taste Officer",
                abbr: "CTO",
                description: "Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, You click only if you survive my lick."
            },
            {
                name: "Alberto Somayya",
                image: 'images/alberto.png',
                designation: "Executive Chef",
                abbr: "EC",
                description: "Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!"
            }

        ];

        // Implement two functions, one named getLeaders,
        // the other named getLeader(index)
        // Remember this is a factory not a service
        corpfac.getLeaders = function(){
            return leadership;
        };

        corpfac.getLeader = function(index){
            return leadership[index];
        };

        return corpfac;

})
</code></pre>

<p>I have then created a controller that brings in the leaders from the services.js into controllers.js.</p>

<p>controllers.js</p>

<pre><code>angular.module('confusionApp')...
    .controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory){
        $scope.leaders= corporateFactory.getLeaders();
    }])
</code></pre>

<p>I have then put within the aboutus.html. A way to loop through the leaders one at a time.</p>

<p>aboutus.html</p>

<pre><code>&lt;div class="container" ng-controller="AboutController"&gt;
...
&lt;div class="row row-content"&gt;
        &lt;div class="col-xs-12 col-sm-9"&gt;
            &lt;h2&gt;Corporate Leadership&lt;/h2&gt;
            &lt;ul class="media-list"&gt;
                &lt;li class="media" ng-repeat="leader in leaders"&gt;
                    &lt;div class="media-left media-middle"&gt;
                        &lt;a ui-sref="app.aboutus"&gt;
                            &lt;img class="media-object img-thumbnail" ng-src={{leader.image}} alt={{leader.abbr}}&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="media-body"&gt;
                        &lt;h2 class="media-heading"&gt;{{leader.name}} 
                           &lt;small&gt;{{leader.designation}}&lt;/small&gt;&lt;/h2&gt;
                           &lt;p&gt;{{leader.description}}&lt;/p&gt;
                       &lt;/div&gt;
                   &lt;/li&gt;
               &lt;/ul&gt;

           &lt;/div&gt;
           &lt;div class="col-xs-12 col-sm-3"&gt;
            &lt;p style="padding:20px;"&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>When I load up the page, it comes up blank. I have checked the answer on 2 different githubs to confirm what I had done was right and they both had the same exact answer as I did.</p>

<p>Is there something I'm not getting? I'm not getting any errors within the Javascript console so I can't tell if there if there is something wrong there.</p>

<p>Lastly, I know this would be asking a lot, but I need to ask questions on this site, so if you wouldn't mind upvoting, I'd greatly appreciate it. I have had a 0 and 1 on my past questions and they are threatening to cut me off from asking any more questions. Well enough of that sad and desperate plug. I look forward to any and all answers.  Thank you kindly for any help.</p>

<p><strong>RE-EDIT:</strong> I've included the whole factory this time around as there were some questions regarding it. Also, to clarify the rest of the about us page prints just fine. Just the section with the Corporate Leadership is blank. It actually says "Corporate Leadership" and then has a big ol' blank space before the rest of the page is rendered. I'm trying to create a plunker as we speak to recreate this.</p>