Load template that is not a tab?

1

I have 4 templates in my page but only 3 are in tabs. The one page that is not a tab does not load. I want it to load via a button in the title bar.

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

$urlRouterProvider.otherwise('/home')
$stateProvider.state('home',
{
    url: '/home',
    views:
    {
        home:
        {
            templateUrl: 'home.html'
        }
    }
})
$stateProvider.state('add',
{
    url: '/add',
    views:
    {
        add:
        {
            templateUrl: 'add.html'
        }
    }
})
$stateProvider.state('settings',
{
    url: '/settings',
    views:
    {
        settings:
        {
            templateUrl: 'settings.html'
        }
    }
})
$stateProvider.state('login',
   {
    url: '/login',
    templateUrl: 'login.html'            
   })

 })

The login is the page that won’t show. The title does change but the content does not. Why is this?