Looking for an easy solution? Here's a method that has always been effective for me:

<a href="...">
<li class="item" ng-click="go_to()">
    <img src="img/ionic.png">
    <p>Step-by-Step Guide</p>
</li>
</a>

You have the option to utilize

$window.location.href = 'http://google.com'

This is how the complete code should appear

    app.controller("listController", ['$scope', '$location', '$window', function($scope, $location, $window) {
    $scope.go_to = function() {
        alert("a"); //TRIGGERED
        var url = "http://google.com";
        $window.location.href = url;
    };
}]);

Opting for $stateProvider is the preferred approach, along with incorporating whitelist plugins to allow access to external resources.

Implement $stateProvider as follows:

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

        // Ionic utilizes AngularUI Router which operates based on states
        // More information can be found here: https://github.com/angular-ui/ui-router
        // Define the various states that the app can exist in.
        // Each state's controller can be located in controllers.js
        $stateProvider

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

            // Each tab maintains its own navigation history stack:

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

            .state('tab.chats', {
                url: '/chats',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/tab-chats.html',
                        controller: 'CenterListController'
                    }
                }
            })
            .state('tab.chat-detail', {
                url: '/chats/:centerId',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chat-detail.html',
                        cache:true,
                        controller: 'CenterDetailController'
                    }
                }
            })

            .state('tab.manual-Location', {
                url: '/manualLocation',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/tab-account.html',
                        controller: 'ManualLocationController'
                    }
                }
            })
            .state('tab.manual-Location-List', {
                url: '/manualLocationList/:locationID',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/manualLocationList.html',
                        controller: 'ManualLocationListController'
                    }
                }
            })
            .state('tab.manual-Location-Detail', {
                url: '/manualLocationDetail/:centerId',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/manual-Location-Detail.html',

                        controller: 'ManualLocationDetailController'
                    }
                }
            });

        // if no matches are found among the above states, this will serve as the fallback
        $urlRouterProvider.otherwise('/tab/dash');

    });

You have the option to utilize $window.open(url, '_blank')

OR

Alternatively, you may refer to this particular answer, where I have implemented changes that allow redirection to another page directly from the ui-router state.

You can further personalize your ui-router by including a parameter called "external," which can be set as true or false.

$stateProvider
.state('external', {
     url: 'http://www.google.com',
     external: true
})

Afterwards, configure $stateChangeStart in your state and manage the redirection process there.

Run Block

myapp.run(function($rootScope, $window) {
  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.external) {
        event.preventDefault();
        $window.open(toState.url, '_self');
      }
    });
})

See a Working Plunkr Example

The $location service in AngularJS is specifically designed for single page applications and not intended for navigating away and reloading the current page.

Learn more about the $location service here

While the $location service allows you to change the URL, it does not have the capability to reload the page or navigate to a different page. In such cases, it's recommended to use a lower level API like $window.location.href

If you need to navigate to a different page, you can do so with the following code:

$window.location.href = "http://www.google.com";

For those using ui-router, you can utilize <a ui-sref="" to navigate to different routes, which essentially wraps around $state.go

HERE'S A USEFUL CODE SNIPPET FOR YOUR ISSUE

$window.open("http://google.com", "_blank");

By using this code, you can open the specified URL in a new tab.

http://example.com/code-sample

This solution has been tested and proven effective for tackling your problem.

$scope.go_to = function() {
    alert("a"); //CALLED
    var url = "http://google.com";
    $window.open(url, "_blank");
};

At last, the mystery is solved :)

The reason behind it was that I had accidentally commented out this one line of code in my home.html:

<!-- angular script (this will be a 404 during testing) -->
<script src="angular.js"></script>

Once I fixed that, all I needed to do was add a simple ng-click