Data not rendering in the view



I am new to ionic and trying to create a simple tabs view with one tab as a starting point. I have a service which fetches data from a rest service and it is linked to a controller which feeds the data to the view. I am able to see that the rest API is returning data but it is getting shown as empty in the view. Can someone help how to debug this?

I am pasting my app.js, controller and service code below

tab summary View

<ion-view view-title="Helpers">

controller code -

angular.module('starter.controllers', [])

.controller('SummaryCtrl', function($scope, summary) {

  $scope.items = { a: summary.getSummary()};


angular.module('', [])
  .factory('summary', function($http) {
    var entities = [];

    return {
      getSummary: function() {
        return $http.get("").then(function(response) {

              name: element.Name
          }, this);
          return entities;


app.js :

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// '' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', ''])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {

    if (window.StatusBar) {
      // org.apache.cordova.statusbar required

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here:
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-Summary.html',
        controller: 'SummaryCtrl'

  // if none of the above states are matched, use this as the fallback


Index.html has following body definition

  <body ng-app="starter">
      The nav bar that will be updated as we navigate between views.
    <ion-nav-bar class="bar-stable">
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).


You can’t just output object data like that. You can do this with primitive variables but again not with objects.

Let’s say this is your items object:

$scope.items = { a: summary.getSummary()};

You can output it like this:

<ion-view view-title="Helpers">

My advice, go through this video tutorial on AngularJS:

It perfectly describes everything you need to know.

Also, please next time format your code :smile:


Thank You - This was very helpful