# Angular controller ng-repeat breaks ionic UI components

**URL:** <https://forum.ionicframework.com/t/angular-controller-ng-repeat-breaks-ionic-ui-components/26088>\
**Category:** ionic-v1\
**Created:** [June 10, 2015, 7:08am UTC](https://forum.ionicframework.com/t/angular-controller-ng-repeat-breaks-ionic-ui-components/26088 "2015-06-10T07:08:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![server102](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/server102/32/90474_2.png) [@server102](https://forum.ionicframework.com/u/server102)\
**Post date:** [June 10, 2015, 7:08am UTC](https://forum.ionicframework.com/t/angular-controller-ng-repeat-breaks-ionic-ui-components/26088/1 "2015-06-10T07:08:47Z")

</div>

Am following a video tutorial and still can’t get the basic controller to work. The data from the controller is not binding to the view, it breaks the subheader UI component.

Here’s the code  
app.js

```
angular.module('starter', ['ionic'])

.controller('CtrlList', function ($scope) {
  $scope.artists = [
  {
    name: 'Harry Jane'
    email: 'info@example.com'
  },
  {
    name: 'Mattiaus Kembley'
    email: 'info@matthiaus.com'
  }

  ];
});

```

index.html

```
<ion-pane>
  <ion-header-bar class="bar-dark">
    <h2 class="title">Artist List</h2>
  </ion-header-bar>
  <div class="bar bar-subheader 
    item-input-inset bar-light">
    <label class="item-input-wrapper">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="search" placeholder="Search">
    </label>
  </div>

  <ion-content class="has-subheader" ng-controller="CtrlList">
    <ion-list>
      <ion-item class="item-thumbnail-left text-wrap" ng-repeat="list in artists">
      <img src="http://placehold.it/100x100" alt="Photo">
      <h2>{{list.name}}</h2>
      <h3>{{list.email}}</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quaerat illo a hic eius vero ex minus iusto cupiditate. Dolorum sint minima at ipsum minus iure, et obcaecati veniam eos.</p>
      </ion-item>
    </ion-list>
  </ion-content>

</ion-pane>

```

---

<div class="post-metadata">

**Author:** ![server102](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/server102/32/90474_2.png) [@server102](https://forum.ionicframework.com/u/server102)\
**Post date:** [June 10, 2015, 7:53am UTC](https://forum.ionicframework.com/t/angular-controller-ng-repeat-breaks-ionic-ui-components/26088/2 "2015-06-10T07:53:29Z")

</div>

```
After tweaking the code for several hours, I've been able to get it working. I assigned the module to variable and then instantiated the controller with the var name. something like creating a new object and calling the controller method I guess.

NB... angujarjs v1.3.13

var randomName = angular.module('starter', ['ionic'])

randomName.controller('ListCtrl', function ($scope) {
  $scope.artists = [
    {'name': 'ifeanyi',
    'email': 'info@example.com'},
    {'name': 'Emeka',
    'email': 'info@emeka.com'}
  ];
})
```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [June 11, 2015, 4:20pm UTC](https://forum.ionicframework.com/t/angular-controller-ng-repeat-breaks-ionic-ui-components/26088/3 "2015-06-11T16:20:32Z")

</div>

As far as being able to bind the data, this works without any issues.

> **[Blank Starter](https://codepen.io/mhartington/pen/RPgxgz)**
>
> A starting point for Ionic Demos Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Pull To Refresh: Nightly\](http://codepen.io/ionic/pen/mqolp/)....

As for the subheader, this is an issue. Can you open an issue of this and ping me on it? (@mhartington on github as well)