Trouble with Blank Ionic Project (newbie)

I have given this an honest shot and spent hours trying to resolve this via tutorials, examples, and videos. I'm finally throwing in the towel on this one and am in need of some extra sets of eyes. I cannot for the life of me figure out why my welcome screen is not showing on my index! It show's up with "ionic blank start" at the top and in the console you see that "welcome.html" was loaded via xhr but it's never displayed. Here are my files:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="cordova.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>
</html>

templates/welcome.html

<div ng-controller="WelcomeCtrl">
    The welcome page
</div>
<h1>welcome welcome</h1>

js/app.js

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('welcome', {
    url: '/welcome',
    abstract:true,
    templateUrl:'templates/welcome.html',
    controller:'WelcomeCtrl'
  })
  .state('sign-up', {
    url: '/sign-up',
    views: {
      tempalteUrl: 'templates/sign-up.html',
      controller: 'SignUpCtrl'
    }
  });

  $urlRouterProvider.otherwise('/welcome');
})

js/controllers.js

angular.module('starter.controllers', [])

.controller('WelcomeCtrl', function($scope) {})

EDIT - Solution

Here's what works:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="cordova.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>
  <body ng-app="starter">
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
      </ion-nav-bar>

      <ion-nav-view class="slide-left-right"></ion-nav-view>
  </body>
</html>

templates/welcome.html

<ion-view title="Welcome">
    <ion-content>
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Email</span>
            <input ng-model="user.email" type="text">
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input ng-model="user.password" type="password">
          </label>
            <button ng-click="signInClick()" class="button button-full button-positive">
            Sign In
            </button>
          <div class="button-bar">
              <a href="#/sign-up" class="button">Sign Up</a>
              <a href="#/forgot-password" class="button"><em>Forgot Password</em></a>
            </div>
        </div>
    </ion-content>
</ion-view>

js/app.js

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('welcome', {
    url:'/welcome',
    templateUrl:'templates/welcome.html',
    controller:'WelcomeCtrl'
  })

  $urlRouterProvider.otherwise('/welcome');
})

js/controllers.js

angular.module('starter.controllers', [])

.controller('WelcomeCtrl', function($scope) {
    $scope.signInClick = function() {
        console.log("sign in click");
    }
})

Add ion-nav-view tag like this in your index.html - 

<ion-content>
    <ion-nav-view></ion-nav-view>
</ion-content>

This tag is necessary when you are working with states. Otherwise ionic shows a blank screen as it cannot find where to render the template.

I haven't tested this with your application, so you can give it a try and let me know.

sorry to post this as an answer but I cannot make comments yet

You should follow the advice of Sam + remove the abstract:true, line in your state provider.

Abstract needs a child view in addition to be displayed, usually this is used for tab navigation in apps.

You have also declared the WelcomeCtrl in your html template

<div ng-controller="WelcomeCtrl">

This is not needed as you have it already declared in your state provider config.