geolocation.js

'use strict';
 
angular.module('myApp')
.factory('Geolocation', ['$q', '$rootScope', function Geolocation ($q, $rootScope) {
  return {
    getPosition: function () {
      var deferred = $q.defer();
 
      if (navigator.geolocation) {
       $rootScope.$apply(function () {
         navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject);
       });
      } else {
        deferred.reject(new Error('Geolocation not available'));
      }
 
      return deferred.promise;
    }
  };
}]);

main.html

<div ng-init="init()" class="main-wrapper">

  <div class="category fast-food active">
    <ul class="place-list">
      <li ng-repeat="place in places.fastFood">

        <h3>{{ place.name }}</h3>
        <p class="address">{{ place.address }}</p>
        <p class="distance">{{ place.distance }}</p>

      </li>
    </ul>
  </div>

  <div class="category restaurants">
    <ul class="place-list">
      <li ng-repeat="place in places.restaurants">

        <h3>{{ place.name }}</h3>
        <p class="address">{{ place.address }}</p>
        <p class="distance">{{ place.distance }}</p>

      </li>
    </ul>
  </div>

  <div class="category bars">
    <ul class="place-list">
      <li ng-repeat="place in places.bars">

        <h3>{{ place.name }}</h3>
        <p class="address">{{ place.address }}</p>
        <p class="distance">{{ place.distance }}</p>

      </li>
    </ul>
  </div>

  <div class="category coffee">
    <ul class="place-list">
      <li ng-repeat="place in places.coffee">

        <h3>{{ place.name }}</h3>
        <p class="address">{{ place.address }}</p>
        <p class="distance">{{ place.distance }}</p>

      </li>
    </ul>
  </div>

</div>

main.js

/*global alert*/
'use strict';

angular.module('myApp')
.controller('MainCtrl', ['$scope', 'Places', 'Geolocation',
            function MainCtrl($scope, Places, Geolocation) {

  // Set up place data
  $scope.places = {
    fastFood: [],
    restaurants: [],
    bars: [],
    coffee: []
  };

  $scope.radius = 5;

  $scope.init = function () {
    // Get places for each category
    Geolocation.getPosition()
    .then(loadPlaces)
    .catch(alertError);
  };

  function loadPlaces(pos) {
    $scope.position = pos;

    getPlaces('fast food').then(function (places) {
      $scope.places.fastFood = places;
    });

    getPlaces('restaurant').then(function (places) {
      $scope.places.restaurants = places;
    });

    getPlaces('alcohol').then(function (places) {
      $scope.places.bars = places;
    });

    getPlaces('coffee').then(function (places) {
      $scope.places.coffee = places;
    });
  }

  function getPlaces(category) {
    var options = {
      query: category,
      radius: $scope.radius,
      lat: $scope.position.coords.latitude,
      lng: $scope.position.coords.longitude
    };

    return Places.getThree(options);
  }

  function alertError(err) {
    alert(err.message);
  }

}]);

main_spec.js

describe('App: Main Page', function () {
  var ptr;

  beforeEach(function () {
    browser.get('/');
    ptr = protractor.getInstance();
  });

  it('should load the main view', function () {
    var mainWrapper = by.css('.main-wrapper');
    expect(ptr.isElementPresent(mainWrapper)).toBe(true);
  });

  it('should have three places', function () {
    ptr.findElements(by.css('.fast-food .place-list li')).then(function (els) {
      expect(els.length).toBe(3);
    });
  });
});