title: Angularjs login form
body: <p>hi I was trying to do a log-in form in angular but i don't know where to start, any help or maybe reference would be appreciated 
  i tried to type a function that checks username and pass but i can't redirect it to another page
  any help please?????????????</p>
  
  <p>here is my html code</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="loginform"&gt;
  
      &lt;ion-pane ng-controller="AppCtrl"&gt;
        &lt;ion-header-bar class="bar-stable"&gt;
          &lt;h1 class="title"&gt;Unilever&lt;/h1&gt;
        &lt;/ion-header-bar&gt;
        &lt;ion-content&gt;
        &lt;div class="modal"&gt;
    &lt;ion-header-bar&gt;
      &lt;h1 class="title"&gt;Login&lt;/h1&gt;
  
    &lt;/ion-header-bar&gt;
    &lt;ion-content&gt;
      &lt;form ng-submit="doLogin()"&gt;
        &lt;div class="list"&gt;
          &lt;label class="item item-input"&gt;
            &lt;span class="input-label"&gt;Username&lt;/span&gt;
            &lt;input type="text" ng-model="loginData.username" required&gt;
          &lt;/label&gt;
          &lt;label class="item item-input"&gt;
            &lt;span class="input-label"&gt;Password&lt;/span&gt;
            &lt;input type="password" ng-model="loginData.password" required&gt;
          &lt;/label&gt;
          &lt;label class="item"&gt;
            &lt;button class="button button-block button-positive" type="submit"&gt;Log in&lt;/button&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/ion-content&gt;
  &lt;/div&gt;
        &lt;/ion-content&gt;
      &lt;/ion-pane&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  and this is my angular code
  
      angular.module('loginform.controllers', [])
  
      .controller('AppCtrl', function($scope, $ionicModal) {
        // Form data for the login modal
        $scope.loginData = {};
  
        // Create the`enter code here` login modal that we will use later
        $ionicModal.fromTemplateUrl('templates/login.html', {
          scope: $scope
        }).then(function(modal) {
          $scope.modal = modal;
        });
  
        // Triggered in the login modal to close it
        $scope.closeLogin = function() {
          $scope.modal.hide();
        };
  
        // Open the login modal
        $scope.login = function() {
          $scope.modal.show();
        };
  
        // Perform the login action when the user submits the login form
        $scope.doLogin = function() {
          if($scope.loginData.username === users.username &amp;&amp; $scope.loginData.password===users.password)
            alert("Welcome");
  
  
  
        };
      })
  
      .controller('PlaylistsCtrl', function($scope) {
        $scope.users = [
          { username: 'Marwan ', password:'taro', course1:'software engineering', course2:'Web Dev' id: 1 },
          { username: 'Galal', password:'1234', course1:'software engineering' course2:'workflow engines' id: 2 },
        ];
      })
  
      .controller('PlaylistCtrl', function($scope, $stateParams) {
      });
  </code></pre>