<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Ionic Profile</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-app="starter">
  <ion-pane ng-controller="ProfileCtrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Profile</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list card">
        <ion-item class="profile-item">
          <div class="profile-picture big-profile-picture">
            <img src="{{user.icon}}">
          </div>
          <h2 class="profile-name dark">{{user.name}}</h2>
          <div class="profile-info">{{user.info}}</div>
        </ion-item>
        <ion-item class="profile-item">
          <button class="button button-block button-positive" ng-click="logIn()">
            Login
          </button>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</body>

</html>
.profile-item {
  text-align: center;
}

.profile-picture {
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0 auto;
  width: 128px;
  height: 128px;
  overflow: hidden;
}

.profile-picture img {
  width: 128px;
  border-radius: 100%;
}

.profile-name {
  padding-top: 20px;
  font-size: x-large !important;
  font-weight: bold !important;
  text-transform: capitalize;
}
angular.module('starter', ['ionic'])

.controller('ProfileCtrl', function($scope, ProfileSrvc) {

  $scope.user = ProfileSrvc.user_data;

  $scope.logIn = function() {
    ProfileSrvc.get_user_data();
  };

  $scope.logIn();
})

.factory('ProfileSrvc', function(UserService) {
  var userData = {
    name: '',
    info: '',
    icon: ''
  };

  function getUserData() {
    UserService.GetUsers(1).then(function(items) {
      userData.name = items[0].user.name.first + ' ' + items[0].user.name.last;
      userData.info = items[0].user.location.street + ', ' + items[0].user.location.city;
      userData.icon = items[0].user.picture.medium;
    });
  };

  return {
    user_data: userData,
    get_user_data: getUserData
  }
})

.factory('UserService', function($http) {
  var BASE_URL = "http://api.randomuser.me/";
  var items = [];

  return {
    GetUsers: function(count) {
      return $http.get(BASE_URL + '?results=' + count).then(function(response) {
        items = response.data.results;
        return items;
      });
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.