In this article I will explain with an example, how to open new browser Tab from Controller with AngularJS using Button and ng-click directive.
Open new browser Tab from Controller in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML markup consists of an HTML Button which is assigned AngularJS ng-click directive.
When the Button is clicked the OpenTab event handler (defined within the Controller) is called. Inside the OpenTab event handler, the new browser Tab is opened from Controller.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.OpenTab = function () {
$window.open("//www.aspsnippets.com/");
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Open Tab" ng-click="OpenTab()" />
</div>
</body>
</html>
Screenshot
Demo
Downloads