<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>
    <link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
    <link rel="stylesheet" href="style.css" />
        <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
    <script src="pistservices.js"></script>
  </head>

  <body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
     <ion-nav-bar class='bar-dark'></ion-nav-bar>
  
    
    <!--
    <ion-header-bar align-title="center" class="bar-dark">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
-->
    <!--
      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).
    -->
    <ion-nav-view></ion-nav-view>
  </body>


http://market.uzmankirala.com/aysegulyalcinw/profil/detay/

 icon="fa fa-home"
 
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {

  var foo = {
    "results": [{
      "id": 1,
      "name": "Test"
    }, {
      "id": 2,
      "name": "Beispiel"
    }, {
      "id": 3,
      "name": "Sample"
    }]
  };

  var result = $filter('filter')(foo.results, {name:'Sample'})[0];

  $scope.name = result.id;
});

</html>
/* Styles go here */

.list a {
  border-bottom: 2px #ff8f1d solid !important;
}
// Ionic Starter App, v0.9.20

// 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'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    StatusBar.styleDefault();
  });
})

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

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

    // Each tab has its own nav history stack:

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })

    .state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })
    .state('tab.friend-detail', {
      url: '/friend/:friendId',
      views: {
        'tab-friends': {
          templateUrl: 'friend-detail.html',
          controller: 'FriendDetailCtrl'
        }
      }
    })

    .state('tab.account', {
      url: '/account',
      views: {
        'tab-account': {
          templateUrl: 'tab-account.html',
          controller: 'AccountCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/friends');

});
This is a blank ionic framework starter template.

https://github.com/driftyco/ionic-starter-tabs
angular.module('starter.controllers', [])

.controller('MainCtrl', function($scope, $http) {
 $http.get('https://cors-test.appspot.com/test').then(function(resp) {
    console.log('Success', resp);
    // For JSON responses, resp.data contains the result
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  })
})

.controller('DashCtrl', function($scope) {
})

.controller('FriendsCtrl', function($scope, PistServis, $http) {
 
 
   $http({
      	method: 'JSONP', 
      	url: 'http://ergast.com/api/f1/2013/drivers/vettel/results.json?callback=JSON_CALLBACK'
      })
 .then(function(response) {
    console.log('Success', response);
    // For JSON responses, resp.data contains the result
    //alert(response.MRData.CircuitTable.Circuits[0].circuitId);
    $scope.races = response.data.MRData.RaceTable.Races;
   
   
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  })
  
  
  
  
})

.controller('FriendDetailCtrl', function($scope, $stateParams, PistServis, $http) {
  
  
   $http({
      	method: 'JSONP', 
      	url: 'http://ergast.com/api/f1/2013/15/results.json?callback=JSON_CALLBACK'
      })
 .then(function(response) {
    console.log('Success', response);
    // For JSON responses, resp.data contains the result
    debugger;
    $scope.results = response.data.MRData.RaceTable.Races[0].Results;
   
   
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  })
  
})


.controller('AccountCtrl', function($scope, $http, PistServis) {
 
 $scope.circuitList = [];
 
     $http({
      	method: 'JSONP', 
      	url: 'http://ergast.com/api/f1/2014/circuits.json?callback=JSON_CALLBACK'
      })
 .then(function(response) {
    console.log('Success', response);
    // For JSON responses, resp.data contains the result
    //alert(response.MRData.CircuitTable.Circuits[0].circuitId);
    $scope.circuitList = response.data.MRData.CircuitTable.Circuits;
   
   
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  })
  
})

;
angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var friends = [
    { id: 0, name: 'Scruff McGruff' },
    { id: 1, name: 'G.I. Joe' },
    { id: 2, name: 'Miss Frizzle' },
    { id: 3, name: 'Ash Ketchum' }
  ];

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
});
<!--
  This template loads for the 'tab.friend-detail' state (app.js)
  'firend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
  The FriendsCtrl pulls data from the Friends service (service.js)
  The Friends service returns an array of friend data
-->
<ion-view title="{{friend.name}}">
  <ion-content has-header="true" padding="true">
  <div class="list">
     <span class="item item-avatar" href="#" ng-repeat="r in results">
      <img src="venkman.jpg">
     <p>{{r.Constructor.name}}</p>
     {{r.Driver.familyName}}
       <span class="badge badge-assertive">{{r.position}}</span>
    </span>
</div>
  </ion-content>
</ion-view>
<ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Pistler</h1>
    
      <div class="row responsive-sm">
  <div class="col">Tur</div>
  <div class="col">Grand Prix</div>
  <div class="col">Takim</div>
  <div class="col">Pozisyon</div>
  <div class="col">Sonuc</div>
</div>
  <div class="row responsive-sm">
  <div class="col">1</div>
  <div class="col">Brazil Grand Prix</div>
  <div class="col">Redbull</div>
  <div class="col">2</div>
  <div class="col">1</div>
</div>
    
    
   <div class="list">

        <a ng-repeat="item in circuitList" 
            href="#/tab/friend/{{item.circuitId}}"
            
           class="item item-avatar">

          <img ng-src="{{ item.image }}">
          <h2>{{ item.circuitName }}</h2>
          <h4>{{ item.Location.country }}</h4>
        </a>

      </div>
      
      


 

    
  </ion-content>
</ion-view>
<ion-view title="Dashboard">
  <ion-content class="has-header padding">
    <h1>Dash</h1>
    
    http://wegraphics.net/downloads/avenir-a-free-coming-soon-html-template/
    google map http://codepen.io/ionic/pen/uzngt 
    http://ergast.com/api/f1/2013/results/1/qualifying.json?callback=myParser
https://dribbble.com/shots/1104725-HTC-One-and-Galaxy-S4-PSD

http://www.google.com/trends/hottrends/visualize?nrow=4&ncol=5&pn=p24 app
http://www.google.com/trends/hottrends

  </ion-content>
</ion-view>
<ion-view title="Friends">
  <ion-content class="has-header">
  
  <div class="list">
     <a class="item item-avatar" href="#/tab/friend/{{r.round}}" ng-repeat="r in races">
      <img src="venkman.jpg">
      <h2>{{r.raceName}}</h2>
      <p>{{r.round}}.</p>
      
       <span class="badge badge-assertive">{{r.Results[0].position}}</span>
    </a>



</div>


  </ion-content>
</ion-view>
<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-striped has-tabs-top tabs-top tabs-background-dark tabs-color-energized">


  <!-- Pets Tab -->
  <ion-tab title="Dashboard"  icon="icon ion-map"  href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>


  <!-- Adopt Tab -->
  <ion-tab title="Friends" icon="icon ion-ios-people"  href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>
  </ion-tab>


  <!-- About Tab -->
  <ion-tab title="Account" icon="icon ion-earth" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>
angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('PistServis', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var Circuits = [
{
"circuitId": "albert_park",
"url": "http://en.wikipedia.org/wiki/Melbourne_Grand_Prix_Circuit",
"circuitName": "Albert Park Grand Prix Circuit",
"Location": {
"lat": "-37.8497",
"long": "144.968",
"locality": "Melbourne",
"country": "Australia"
}
},
{
"circuitId": "americas",
"url": "http://en.wikipedia.org/wiki/Circuit_of_the_Americas",
"circuitName": "Circuit of the Americas",
"Location": {
"lat": "30.1328",
"long": "-97.6411",
"locality": "Austin",
"country": "USA"
}
},
{
"circuitId": "bahrain",
"url": "http://en.wikipedia.org/wiki/Bahrain_International_Circuit",
"circuitName": "Bahrain International Circuit",
"Location": {
"lat": "26.0325",
"long": "50.5106",
"locality": "Sakhir",
"country": "Bahrain"
}
},
{
"circuitId": "catalunya",
"url": "http://en.wikipedia.org/wiki/Circuit_de_Catalunya",
"circuitName": "Circuit de Catalunya",
"Location": {
"lat": "41.57",
"long": "2.26111",
"locality": "Montmeló",
"country": "Spain"
}
},
{
"circuitId": "hockenheimring",
"url": "http://en.wikipedia.org/wiki/Hockenheimring",
"circuitName": "Hockenheimring",
"Location": {
"lat": "49.3278",
"long": "8.56583",
"locality": "Hockenheim",
"country": "Germany"
}
},
{
"circuitId": "hungaroring",
"url": "http://en.wikipedia.org/wiki/Hungaroring",
"circuitName": "Hungaroring",
"Location": {
"lat": "47.5789",
"long": "19.2486",
"locality": "Budapest",
"country": "Hungary"
}
},
{
"circuitId": "interlagos",
"url": "http://en.wikipedia.org/wiki/Aut%C3%B3dromo_Jos%C3%A9_Carlos_Pace",
"circuitName": "Autódromo José Carlos Pace",
"Location": {
"lat": "-23.7036",
"long": "-46.6997",
"locality": "São Paulo",
"country": "Brazil"
}
},
{
"circuitId": "marina_bay",
"url": "http://en.wikipedia.org/wiki/Marina_Bay_Street_Circuit",
"circuitName": "Marina Bay Street Circuit",
"Location": {
"lat": "1.2914",
"long": "103.864",
"locality": "Marina Bay",
"country": "Singapore"
}
},
{
"circuitId": "monaco",
"url": "http://en.wikipedia.org/wiki/Circuit_de_Monaco",
"circuitName": "Circuit de Monaco",
"Location": {
"lat": "43.7347",
"long": "7.42056",
"locality": "Monte-Carlo",
"country": "Monaco"
}
},
{
"circuitId": "monza",
"url": "http://en.wikipedia.org/wiki/Autodromo_Nazionale_Monza",
"circuitName": "Autodromo Nazionale di Monza",
"Location": {
"lat": "45.6156",
"long": "9.28111",
"locality": "Monza",
"country": "Italy"
}
},
{
"circuitId": "red_bull_ring",
"url": "http://en.wikipedia.org/wiki/Red_Bull_Ring",
"circuitName": "Red Bull Ring",
"Location": {
"lat": "47.2197",
"long": "14.7647",
"locality": "Spielburg",
"country": "Austria"
}
},
{
"circuitId": "sepang",
"url": "http://en.wikipedia.org/wiki/Sepang_International_Circuit",
"circuitName": "Sepang International Circuit",
"Location": {
"lat": "2.76083",
"long": "101.738",
"locality": "Kuala Lumpur",
"country": "Malaysia"
}
},
{
"circuitId": "shanghai",
"url": "http://en.wikipedia.org/wiki/Shanghai_International_Circuit",
"circuitName": "Shanghai International Circuit",
"Location": {
"lat": "31.3389",
"long": "121.22",
"locality": "Shanghai",
"country": "China"
}
},
{
"circuitId": "silverstone",
"url": "http://en.wikipedia.org/wiki/Silverstone_Circuit",
"circuitName": "Silverstone Circuit",
"Location": {
"lat": "52.0786",
"long": "-1.01694",
"locality": "Silverstone",
"country": "UK"
}
},
{
"circuitId": "sochi",
"url": "http://en.wikipedia.org/wiki/Sochi_International_Street_Circuit",
"circuitName": "Sochi International Street Circuit",
"Location": {
"lat": "43.4057",
"long": "39.9578",
"locality": "Sochi",
"country": "Russia"
}
},
{
"circuitId": "spa",
"url": "http://en.wikipedia.org/wiki/Circuit_de_Spa-Francorchamps",
"circuitName": "Circuit de Spa-Francorchamps",
"Location": {
"lat": "50.4372",
"long": "5.97139",
"locality": "Spa",
"country": "Belgium"
}
},
{
"circuitId": "suzuka",
"url": "http://en.wikipedia.org/wiki/Suzuka_Circuit",
"circuitName": "Suzuka Circuit",
"Location": {
"lat": "34.8431",
"long": "136.541",
"locality": "Suzuka",
"country": "Japan"
}
},
{
"circuitId": "villeneuve",
"url": "http://en.wikipedia.org/wiki/Circuit_Gilles_Villeneuve",
"circuitName": "Circuit Gilles Villeneuve",
"Location": {
"lat": "45.5",
"long": "-73.5228",
"locality": "Montreal",
"country": "Canada"
}
},
{
"circuitId": "yas_marina",
"url": "http://en.wikipedia.org/wiki/Yas_Marina_Circuit",
"circuitName": "Yas Marina Circuit",
"Location": {
"lat": "24.4672",
"long": "54.6031",
"locality": "Abu Dhabi",
"country": "United Arab Emirates"
}
}
]
;

  return {
    all: function() {
      return Circuits;
    },
    get: function(friendId) {
      // Simple index lookup
      
      var result = Circuits[1];
     // var result = $filter('filter')(Circuits, {circuitId:friendId })[0];
      return result;
  
    }
  }
}
);