show first JSON data object initially using angular js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RichMedia Portfolio</title>
<link href="css/style.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="richPortfolio">



<div class="container" ng-controller="adsCtrl">
    <nav>
        <ul class="accordion" onclick="myFunction(event)">
            <li ng-repeat="ad in ads">
                <a class="ad" href="" id="ad{{ ad.id }}" ng-click="select(ad)">{{ ad.title }}</a>
            </li>
        </ul>
    </nav>
    <div class="showCase_container">
        <div id="ad{{ selectedItem.id }}Case" class="adActive">
            <div class="description">
                <h3 class="ad_name">{{ selectedItem.title }}</h3>
                <p>{{selectedItem.content}}</p>
                <hr>
                <h3>Description</h3>
                <p>{{ selectedItem.desc }}</p>
                <hr>
                <h3>Dimension</h3>
                <p>{{ selectedItem.dim }}</p>
            </div>
        </div>
    </div>
</div>






<script src="rich.js"></script>
</body>
</html>


// Modules

var rich = angular.module('richPortfolio', ['ngRoute']);

rich.config(function($routeProvider){
	$routeProvider
		.when('/', {
			controller: 'adsCtrl',
			templateUrl: 'pages/home.html'
		})
		.otherwise({ redirectTo: '/' });
});

// controllers

rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
	ads.then(function(data){
		$scope.ads = data;
	});



    // nav redirection
    $scope.select = function(item) {
        $scope.selectedItem = item;  
    };

    $scope.text = '<p>Hello! <a href="#">Link</a></p>';

}]);

//services

rich.factory('ads', ['$http', function($http){

	// after v1.6 need to use .then function to get it worked
	return $http.get('ads.json')
			.then(function(response){
				//alert('success');
				return data = response.data;
			},function(error){
				//alert('error');
			});

}]);





function myFunction(e) {
  var elems = document.querySelector(".accordion .active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

[
  {
    "id": "1",
    "title": "cube",
    "content": "cube 1 cube",
    "desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
    "dim":"300x250"
  },
  {
    "id": "2",
    "title": "Gallery",
    "content": "Gallery 2 Gallery",
    "desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
    "dim":"300x250, 300x600, 728x90, 970x250"
  }

]