Ionic Material Content not load - angularjs

Question

I am using ionic with agular js and ionic material framework. I used YouTube api for getting YouTube channel feed, but its content are not getting load initially. When i scroll down, feed data are getting display.
Link of image for initally content not getting load.
http://i.hizliresim.com/DR4ZPy.jpg
Link of image when i scroll down
http://i.hizliresim.com/7bMzNm.jpg
Ionic console logs error.
TypeError: o[0] is undefined /lib/ionic-material/ionic.material.min.js, Line: 13
Code snippet of my HTML file "Gallery.Html"
Galery CTRL
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion, $http) {
// Set Motion
$scope.$parent.showHeader();
$scope.$parent.clearFabs();
$scope.isExpanded = false;
$scope.$parent.setExpanded(false);
$scope.$parent.setHeaderFab(false);
$timeout(function() {
ionicMaterialMotion.slideUp({
selector: '.slide-up'
});
}, 300);
$timeout(function() {
ionicMaterialMotion.fadeSlideInRight({
startVelocity: 3000
});
}, 700);
// Activate ink for controller
ionicMaterialInk.displayEffect();
$scope.videos = [];
$scope.playerVars = {
rel: 0,
showinfo: 0,
modestbranding: 0,
}
$scope.nextPageToken = null;
$scope.youtubeParams = {
key: 'AIzaSyAurmOD4QgzS5jBxca1KMUe_GWGuxV6C5Q',
type: 'video',
maxResults: '5',
part: 'id,snippet',
q: 'necatiakcay',
order: 'date',
channelId: 'UCpdJQ9OrynGRA110wHO2_iA',
}
function loadVideos(params, callback) {
$http.get('https://www.googleapis.com/youtube/v3/search', {params: params}).success(function(response){
var videos = [];
if(response.nextPageToken) {
$scope.nextPageToken = response.nextPageToken;
console.log ($scope.nextPageToken);
angular.forEach(response.items, function(child){
videos.push(child);
});
}
callback(videos);
});
}
$scope.loadOlderVideos = function() {
var params = $scope.youtubeParams;
if ($scope.nextPageToken) {
params['pageToken'] = $scope.nextPageToken;
}
loadVideos(params, function(olderVideos){
if (olderVideos) {
$scope.videos = $scope.videos.concat(olderVideos);
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.loadNewerVideos = function() {
var params = $scope.youtubeParams;
params['pageToken'] = '';
loadVideos(params, function(newerVideos) {
$scope.videos = newerVideos;
$scope.$broadcast('scroll.refreshComplete');
});
};
<ion-view view-title="Gallery">
<ion-content>
<ion-refresher
pulling-text="Yükleniyor..."
on-refresh="loadNewerVideos()">
</ion-refresher>
<div class="list slide-up">
<div id="aktif" ng-repeat="video in videos track by video.id.videoId" style="width: 100%; margin: 0px;" class="card card-gallery item item-text-wrap">
<div class="ink dark-bg">
<h2>{{video.snippet.title}}</h2>
<p>{{video.snippet.publishedAt | limitTo: 10}}</p>
<div class="embed-responsive embed-responsive-16by9">
<youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
</div>
</div>
<div class="tabs tabs-icon-left static">
<a style="max-width: 100%;" class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
4
</a>
<a style="max-width: 100%;" class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
4
</a>
<a style="max-width: 100%;" class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
2
</a>
</div>
</div>
<ion-infinite-scroll
on-infinite="loadOlderVideos()"
distance="30%">
</ion-infinite-scroll>
</ion-content>
</ion-view>