I am trying to create an Angular service that gets images and passes those images to controller to push to a carousel. I did all thework on my controller and it works now with a service, it doesnt read the service function. 
My index.html file 

```
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="example.js"></script>
    <script src="example-service.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
 <div id="fl-main" class="container">
        <div class="col-xs-6 col-md-4 filter">
            <label class="btn btn-primary" ng-model="male" ng-click="loadhome(male)">Male</label>
      <label class="btn btn-primary" ng-model="female">Female</label>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-8">
            <div carousel interval="myInterval">
        <div slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" style="margin:auto; width: ">
            <div class="carousel-caption">      
            </div>
        </div>
        </div>
        </div>
    </div>
</div>
  </body>
</html>

```

My controller file, example.js 

```
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, homeService) {

  $scope.loadhome = function(gender) {  
        $scope.myInterval = 5000;
        var slides = $scope.slides = [];
        var items = homeService.loadhomepage(gender);

    for (var i=0; i<items.length; i++)
            {
                slides.push({   
                image: items[i].image
      });
    }
    };

});

```

my service file. example-service.js

```
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').factory('homeService', function () {

    var loadhomepage = function(gender) {
        console.log('inloadhomepage');
        var slides = [];
        if(gender==='male')
        {
        slides.items =[
         {src:'images/carousel.jpg'},
         {src:'images/carousel1.jpg'}
        ];
    }
    return slides;
    };

});

```

So basically when i click the button male, it should call the loadhome() function in controller which shud assign the items in the service function to var items in the controller. Then controller will push all images to $scope.slides. here is my plunkr file. <http://plnkr.co/edit/JcHrHDJkgFxDfSVcqIJZ>

how do i get it to return with items length to be equal to the array it receives? ![enter image description here](https://i.stack.imgur.com/UthrQ.png)