Bootstrap 4 navbar with Angular - how to activate item - angular-ui-router

Question

I am putting together B4 navbar with Angular router states. Here is my code:
HTML:
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" ui-sref="state1" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" ui-sref="state2" href="#">Link</a>
</li>
</ul>
<div ui-view></div>
Controller:
var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("state1", {
url: "#",
template: "<p>State 1</p>",
controller: "Ctrl1"
}).state("state2", {
url: "#",
template: "<p>State 2</p>",
controller: "Ctrl2"
});
});
var ctrls = angular.module("AppCtrls", []);
ctrls.controller( "Ctrl1", function($scope) {
console.log("Ctrl1 loaded.");
});
ctrls.controller( "Ctrl2", function($scope) {
console.log("Ctrl2 loaded.");
});
What I want to achieve is to have a default active item with its content being shown. I am setting up the first link to active but it doesn't do anything.
Here is my
Fiddle

Answer 1

try this code for HTML :
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item" ui-sref-active="active">
<a class="nav-link" ui-sref="name1">Active</a>
</li>
<li class="nav-item" ui-sref-active="active">
<a class="nav-link" ui-sref="name2">Link</a>
</li>
</ul>
<div ui-view></div>
And this Angular :
var myApp = angular.module("myApp",[ "ui.router"]);
myApp.config(function($stateProvider, $urlRouterProvide) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('name1',{
url: "/name1",
conontroller:'ctrl1',
templateUrl: "name1.html"
})
.state('name2',{
url: "/name2",
conontroller:'ctrl2',
templateUrl: "name2.html"
})
});
myApp.controller( "ctrl1", function($scope) {
console.log("Ctrl1 loaded.");
});
myApp.controller( "ctrl2", function($scope) {
console.log("Ctrl2 loaded.");
});