AngularJS & UI-Router - How do i prevent a full page reload on URL bar change?

Question

Setup: I'm currently using AngularJS v1.4 with ui-router v0.2.15

I have 2 sibling routes, lets call them /apple & /orange

If i load my app and go to 'apple' - apple's view loads correctly

I can use $state.go('orange') to goto orange - the view reloads correctly.

'use strict';

angular.module('loadzApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router',
  'ui.bootstrap'
])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');

    $stateProvider
    .state('main', {
      url: '/',
      templateUrl: 'app/main/main.html',
      controller: 'MainCtrl'
    })
    .state('apple', {
        url: '/apple',
        templateUrl: 'apple.html',
        controller: function ($scope) {
            $scope.feedback = {}
        }
    })
    .state('orange', {
        url: '/orange',
        templateUrl: 'orange.html',
        controller: function ($scope) {
            $scope.feedback = {}
        }
    })

    $locationProvider.html5Mode(true);
  });

Problem: I notice that when i'm on view apple and i change the url in chrome touse: www.domain.com/orange - this results in a full page reload. It will load the correct page, but it seems like the request should be handled by ui-router without a full page refresh

Question: How do i configure ui-router to intercept change in the chrome url bar and prevent a full page reload for all sibling routes?