student-profile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dash Students</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="description" content="Avenxo Admin Theme">
    <meta name="author" content="KaijuThemes">

    <link type='text/css' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600' rel='stylesheet'>

    <link type="text/css" href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">        <!-- Font Awesome -->
    <link type="text/css" href="assets/fonts/themify-icons/themify-icons.css" rel="stylesheet">              <!-- Themify Icons -->
    <link type="text/css" href="assets/css/styles.css" rel="stylesheet">                                     <!-- Core CSS with all styles -->

    <link type="text/css" href="assets/plugins/codeprettifier/prettify.css" rel="stylesheet">                <!-- Code Prettifier -->
    <link type="text/css" href="assets/plugins/iCheck/skins/minimal/blue.css" rel="stylesheet">              <!-- iCheck -->

    <!--[if lt IE 10]>
        <script type="text/javascript" src="assets/js/media.match.min.js"></script>
        <script type="text/javascript" src="assets/js/respond.min.js"></script>
        <script type="text/javascript" src="assets/js/placeholder.min.js"></script>
    <![endif]-->
    <!-- The following CSS are included as plugins and can be removed if unused-->
    
<link type="text/css" href="assets/plugins/form-fseditor/fseditor.css" rel="stylesheet">                          <!-- FullScreen Editor -->
<style type="text/css">
   .studentRow:hover{
      cursor: pointer;
   }
</style>

      <!-- Controller -->
      <script src="assets/js/jquery.js"></script>
      <script src="assets/js/angular.min.js"></script>
      <script src="assets/js/angular-cookies.min.js"></script>
      <script src="controllers/student_profile.js"></script>


    </head>

    <body class="animated-content" ng-app="StudentProfileApp" ng-controller="studentProfileController" ng-cloak>
        
        <header id="topnav" class="navbar navbar-default navbar-fixed-top" role="banner">

   <div class="logo-area">
      <span id="trigger-sidebar" class="toolbar-trigger toolbar-icon-bg">
         <a data-toggle="tooltips" data-placement="right" title="Toggle Sidebar">
            <span class="icon-bg">
               <i class="ti ti-menu"></i>
            </span>
         </a>
      </span>
      
      <a class="navbar-brand" href="index.html">Avenxo</a>

      <div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
            <div class="input-group">
               <span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
            <input type="text" class="form-control" placeholder="..."> 
            <span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
         </div>
        </div>

   </div><!-- logo-area -->

   <ul class="nav navbar-nav toolbar pull-right">


        <li class="dropdown toolbar-icon-bg hidden-xs">
         <a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="ti ti-email"></i></span><span
         class="badge badge-deeporange">2</span></a>
         <div class="dropdown-menu notifications arrow">
            <div class="topnav-dropdown-header">
               <span>Messages</span>
            </div>
            <div class="scroll-pane">
               <ul class="media-list scroll-content">
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Vincent Keller</strong> <span class="text-gray">‒ Design should be ...</span></h4>
                           <span class="notification-time">2 mins ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Frend Pratt</strong> <span class="text-gray">‒ I will start with the ...</span></h4>
                           <span class="notification-time">40 mins ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Cynthia Hines</strong> <span class="text-gray">‒ Interior bits are ...</span></h4>
                           <span class="notification-time">6 hours ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Robin Horton</strong> <span class="text-gray">‒ Are you even ...</span></h4>
                           <span class="notification-time">8 days ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Amanda Torrez</strong> <span class="text-gray">‒ The message is ...</span></h4>
                           <span class="notification-time">16 hours ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Khan Farhan</strong> <span class="text-gray">‒ Expected the stuff ...</span></h4>
                           <span class="notification-time">2 days ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-message">
                     <a href="#">
                        <div class="media-left">
                           <img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading"><strong>Will Whedon</strong> <span class="text-gray">‒ The movie of this ...</span></h4>
                           <span class="notification-time">4 days ago</span>
                        </div>
                     </a>
                  </li>
               </ul>
            </div>
            <div class="topnav-dropdown-footer">
               <a href="#">See all messages</a>
            </div>
         </div>
      </li>
      
      <li class="dropdown toolbar-icon-bg">
         <a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="ti ti-bell"></i></span><span class="badge badge-deeporange">2</span></a>
         <div class="dropdown-menu notifications arrow">
            <div class="topnav-dropdown-header">
               <span>Notifications</span>
            </div>
            <div class="scroll-pane">
               <ul class="media-list scroll-content">
                  <li class="media notification-success">
                     <a href="#">
                        <div class="media-left">
                           <span class="notification-icon"><i class="ti ti-check"></i></span>
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading">Update 1.0.4 successfully pushed</h4>
                           <span class="notification-time">8 mins ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-info">
                     <a href="#">
                        <div class="media-left">
                           <span class="notification-icon"><i class="ti ti-check"></i></span>
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading">Update 1.0.3 successfully pushed</h4>
                           <span class="notification-time">24 mins ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-teal">
                     <a href="#">
                        <div class="media-left">
                           <span class="notification-icon"><i class="ti ti-check"></i></span>
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading">Update 1.0.2 successfully pushed</h4>
                           <span class="notification-time">16 hours ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-indigo">
                     <a href="#">
                        <div class="media-left">
                           <span class="notification-icon"><i class="ti ti-check"></i></span>
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading">Update 1.0.1 successfully pushed</h4>
                           <span class="notification-time">2 days ago</span>
                        </div>
                     </a>
                  </li>
                  <li class="media notification-danger">
                     <a href="#">
                        <div class="media-left">
                           <span class="notification-icon"><i class="ti ti-arrow-up"></i></span>
                        </div>
                        <div class="media-body">
                           <h4 class="notification-heading">Initial Release 1.0</h4>
                           <span class="notification-time">4 days ago</span>
                        </div>
                     </a>
                  </li>
               </ul>
            </div>
            <div class="topnav-dropdown-footer">
               <a href="#">See all notifications</a>
            </div>
         </div>
      </li>

      <li class="dropdown toolbar-icon-bg">
         <a href="#" class="dropdown-toggle username" data-toggle="dropdown">
            <img class="img-circle" src="http://placehold.it/300&text=Placeholder" alt="" />
         </a>
         <ul class="dropdown-menu userinfo arrow">
            <li><a href="#/"><i class="ti ti-settings"></i><span>Account Settings</span></a></li>
            <li><a href="#/"><i class="ti ti-shift-right"></i><span>Sign Out</span></a></li>
         </ul>
      </li>

   </ul>

</header>

        <div id="wrapper">
            <div id="layout-static">
                <div class="static-sidebar-wrapper sidebar-default">
                    <div class="static-sidebar">
                        <div class="sidebar">


   <div class="widget stay-on-collapse" id="widget-sidebar">
        <nav role="navigation" class="widget-body">
   <ul class="acc-menu">
      <li><a href="index.html"><i class="ti ti-layout-grid2"></i><span>Dashboard</span><span class="badge badge-teal">2</span></a></li>
      <li><a href="events.html"><i class="ti ti-bell"></i><span>Events & Notifications</span></span></a></li>
      <li><a href="attendance.html"><i class="ti ti-upload"></i><span>Upload Attendance</span></span></a></li>
      <li><a href="javascript:;"><i class="ti ti-reload"></i><span>Workflow</span></a>
         <ul class="acc-menu">
            <li><a href="leaves.html">Leaves</a></li>
            <li><a href="payments.html">Payments</a></li>
            <li><a href="service-requests.html">Requests</a></li>
         </ul>
      </li>    
      <li><a href="inbox.html"><i class="ti ti-email"></i><span>Inbox</span></span></a></li>
      <li><a href="calendar.html"><i class="ti ti-calendar"></i><span></span>Calendar</span></a></li>
      <li><a href="student-profile.html"><i class="ti ti-search"></i><span>Search Student</span></span></a></li>
      <li><a href="javascript:;"><i class="ti ti-settings"></i><span>Tools</span></a>
         <ul class="acc-menu">
            <li><a href="home-works.html">Upload Homeworks</a></li>
            <li><a href="marklists.html">Upload Marklist</a></li>
            <li><a href="messenger.html">Send Message</a></li>
            <li><a href="progress-report.html">Progress Report Generator</a></li>
            <li><a href="tc-generator.html">TC Generator</a></li>
         </ul>
      </li>
      <li><a href="javascript:;"><i class="ti ti-user"></i><span>Profiles</span></a>
         <ul class="acc-menu">
            <li><a href="student-profile.html">Students</a></li>
            <li><a href="teacher-profile.html">Teachers</a></li>
            <li><a href="admin-profile.html">Administrators</a></li>
         </ul>
      </li> 
      <li><a href="javascript:;"><i class="ti ti-folder"></i><span>Resources</span></a>
         <ul class="acc-menu">
            <li><a href="class-management.html">Classes</a></li>
            <li><a href="courses.html">Courses</a></li>
            <li><a href="time-table.html">Time Tables</a></li>
         </ul>
      </li>                                        
   </ul>
</nav>
    </div>


</div>
                    </div>
                </div>
    
                <div class="static-content-wrapper">
                    <div class="static-content">
                        <div class="page-content">
                            <ol class="breadcrumb">
                                

                            </ol>
                            <div class="container-fluid">
                                 
<div data-widget-group="group1">

                           <div class="row">
                              <div class="col-sm-3"></div>
                              <div class="col-sm-6">
                                 <div class="input-group" style="padding: 10px; border: none;">
                                    <input type="text" ng-model="searchKey" class="form-control input-lg" style="text-align: center" placeholder="Eg: Allen John, 12-A, 12A002, 43564, 9999123456">
                                    <span class="input-group-btn">
                                    <button class="btn btn-default btn-lg" type="button" ng-click="search(searchKey)"><i class="ti ti-search"></i></button>
                                    </span>
                                 </div>
                                 <p ng-if="!isSearched" style="font-size:21px; text-align: center; color: #7f8c8d">Search with Name, Class, Roll Number, Registration Number, Mobile Number</p>
                              </div>
                           </div>


                           <div class="row" ng-if="isSearched && !isFound" style="padding-top: 30px">
                             <p style="font-size:21px; text-align: center; color: #7f8c8d">No results found.</p>
                           </div>

               <div class="panel panel-default" ng-show="isSearched && isFound && !singleStudent">
                  <div class="panel-heading">
                     <h2>List of Students</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr style="font-weight: 400; color: #2980b9 !important; background: #ecf0f1">
                                  <th>#</th>
                                  <th>Name</th>
                                  <th>Class</th>
                                  <th>Roll No</th>
                                  <th>Stream</th>
                                  <th>Contact No</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr class="studentRow" ng-repeat="student in studentData track by $index" onmouseover="this.style.color='#2980b9';" onmouseout="this.style.color='';" ng-click="goToStudentProfile(student.regNo)">
                                  <th scope="row">{{$index + 1}}.</th>
                                  <td><strong>{{student.fName}} {{student.lName}} </strong></td>
                                  <td>{{student.class}} - {{student.division}} </td>
                                  <td>{{student.roll}}</td>
                                  <td>{{student.stream}}</td>
                                  <td>{{student.contactPhone}}</td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
                </div>

   <div class="row" ng-show="isSearched && isFound && singleStudent">
      <div class="col-sm-3">
         <div class="panel panel-profile">
           <div class="panel-body">
             <img src="http://placehold.it/300&text=Placeholder" class="img-circle">
             <div class="name">{{studentData.fName + " " + student.lName}}</div>
             <div class="info">Reg No : {{studentData.regNo}}</div>
             <div class="info">{{studentData.class}} - {{studentData.division}}</div>
             <div class="info">Mob: {{studentData.contactPhone}}</div>
           </div>
         </div><!-- panel -->
         <div class="list-group list-group-alternate mb-n nav nav-tabs">
            <a href="#tab-about"    role="tab" data-toggle="tab" class="list-group-item active"><i class="ti ti-user"></i> About </a>
            <a href="#tab-timeline" role="tab" data-toggle="tab" class="list-group-item"><i class="ti ti-view-list-alt"></i> Academics </a>
            <a href="#tab-cocuricular" role="tab" data-toggle="tab" class="list-group-item"><i class="ti ti-dribbble"></i> Co-Curicular</a>
            <a href="#tab-edit"  role="tab" data-toggle="tab" class="list-group-item"><i class="ti ti-pencil"></i> Edit</a>
         </div>
      </div><!-- col-sm-3 -->
      <div class="col-sm-9">
         <div class="tab-content">
            <div class="tab-pane" id="tab-cocuricular">
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Sports</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Art</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Literary</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Music</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Instruments</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Dance</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Tech</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h2>Misc</h2>
                  </div>
                  <div class="panel-body">
                     <div class="table-responsive">
                        <table class="table m-n">
                           <thead>
                                <tr>
                                  <th>#</th>
                                  <th>Skill Type</th>
                                  <th>Description</th>
                                  <th>Progress</th>
                                </tr>
                           </thead>
                           <tbody>
                                <tr>
                                  <th scope="row">1.</th>
                                  <td><strong>Avenxo</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 20%"></div>
                                            </div>
                                        </td>
                                </tr>
                                <tr>
                                  <th scope="row">6.</th>
                                  <td><strong>Xavant</strong></td>
                                  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
                                  <td class="vam">
                                    <div class="progress m-n">
                                              <div class="progress-bar progress-bar-success" style="width: 15%"></div>
                                            </div>
                                        </td>
                                </tr>
                           </tbody>
                        </table>
                     </div><!-- /.table-responsive -->
                  </div> <!-- /.panel-body -->
               </div>
            </div> <!-- #tab-projects -->

            <div class="tab-pane active" id="tab-about">
               <div class="panel panel-default">
                   <div class="panel-heading">
                     <h2>About</h2>
                   </div>
                  <div class="panel-body">

                     <div class="about-area">
                           <h4>Basic Information</h4>
                            <div class="table-responsive">
                              <table class="table">
                                <tbody>
                                  <tr>
                                    <th>Registration No</th>
                                    <td>{{studentData.regNo}}</td>
                                  </tr>
                                  <tr>
                                    <th>Class</th>
                                    <td>{{studentData.class}}</td>
                                  </tr>
                                  <tr>
                                    <th>Division</th>
                                    <td>{{studentData.division}}</td>
                                  </tr>
                                  <tr>
                                    <th>Roll No</th>
                                    <td>{{studentData.roll}}</td>
                                  </tr>
                                  <tr>
                                    <th>Date Of Joining </th>
                                    <td>{{studentData.doj}}</td>
                                  </tr>
                                  <tr>
                                    <th>Stream</th>
                                    <td>{{studentData.stream}}</td>
                                  </tr>
                                  <tr>
                                    <th>Section</th>
                                    <td>{{studentData.section}}</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                     </div>
                     <div class="about-area">
                           <h4>Personal Information</h4>
                            <div class="table-responsive">
                              <table class="table about-table">
                                <tbody>
                                  <tr>
                                    <th>Full Name</th>
                                    <td>{{studentData.fName + " " + studentData.lName}} </td>
                                  </tr>
                                  <tr>
                                    <th>Birth Date</th>
                                    <td>{{studentData.dob}}</td>
                                  </tr>
                                  <tr>
                                    <th>Height</th>
                                    <td>{{studentData.height}}</td>
                                  </tr>
                                  <tr>
                                    <th>Weight</th>
                                    <td>{{studentData.weight}}</td>
                                  </tr>
                                  <tr>
                                    <th>Gender</th>
                                    <td>{{studentData.gender}}</td>
                                  </tr>
                                  <tr>
                                    <th>Blood Group</th>
                                    <td>{{studentData.bloodGroup}}</td>
                                  </tr>
                                  <tr>
                                    <th>Contact No </th>
                                    <td>{{studentData.contactPhone}}</td>
                                  </tr>
                                  <tr>
                                    <th>Contact Address</th>
                                    <td>{{studentData.contactAddress}}</td>
                                  </tr>
                                  <tr>
                                  <tr>
                                    <th>Religion</th>
                                    <td>{{studentData.religion}}</td>
                                  </tr>
                                  <tr>
                                    <th>Caste </th>
                                    <td>{{studentData.caste}}</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                     </div>
                     <div class="about-area">
                           <h4>Parents Information</h4>
                            <div class="table-responsive">
                              <table class="table about-table">
                                <tbody>
                                 
                                  <tr>
                                    <th>Fathers Name</th>
                                    <td>{{studentData.fatherName}}</td>
                                  </tr>
                                  <tr>
                                    <th>Fathers Occupation </th>
                                    <td>{{studentData.fatherOccupation}}</td>
                                  </tr>
                                  <tr>
                                    <th>Fathers Contact No </th>
                                    <td>{{studentData.fatherPhone}}</td>
                                  </tr>
                                  <tr>
                                    <th>Fathers Income </th>
                                    <td>{{studentData.fatherIncome}}</td>
                                  </tr>
                                  <tr>
                                    <th>Mothers Name </th>
                                    <td>{{studentData.motherName}}</td>
                                  </tr>
                                  <tr>
                                    <th>Mothers Occupation</th>
                                    <td>{{studentData.motherOccupation}}</td>
                                  </tr>
                                  <tr>
                                    <th>Mothers Contact No </th>
                                    <td>{{studentData.motherPhone}}</td>
                                  </tr>
                                   <tr>
                                    <th>Mothers Income</th>
                                    <td>{{studentData.motherIncome}}</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                     </div>
                  </div>
               </div>
            </div>

            <div class="tab-pane" id="tab-timeline">
               <div class="panel">
                  <div class="panel-heading">
                     <h2>Timeline</h2>
                  </div>
                  <div class="panel-body">
                     <div class="row">
                        <div class="col-md-12">
                           <ul class="timeline">
                              <li class="timeline-primary">
                                 <div class="timeline-icon"><i class="ti ti-pencil"></i></div>
                                 <div class="timeline-body">
                                    <div class="timeline-header">
                                       <span class="author">Posted by <a href="#">David Tennant</a></span>
                                       <span class="date">Monday, November 21, 2013</span>
                                    </div>
                                    <div class="timeline-content">
                                       <h4>Consectetur Adipisicing Elit</h4>
                                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="timeline-info">
                                 <div class="timeline-icon"><i class="ti ti-heart"></i></div>
                                 <div class="timeline-body">
                                    <div class="timeline-header">
                                       <span class="author">Posted by <a href="#">David Tennant</a></span>
                                       <span class="date">Monday, November 21, 2013</span>
                                    </div>
                                    <div class="timeline-content">
                                       <h4>Consectetur Adipisicing Elit</h4>
                                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
                                    </div>
                                 </div>
                              </li>
                              <li class="timeline-warning">
                                 <div class="timeline-icon"><i class="ti ti-camera"></i></div>
                                 <div class="timeline-body">
                                    <div class="timeline-header">
                                       <span class="author">Posted by <a href="#">David Tennant</a></span>
                                       <span class="date">Monday, November 21, 2013</span>
                                    </div>
                                    <div class="timeline-content">
                                       <h4>Consectetur Adipisicing Elit</h4>
                                       <ul class="list-inline">
                                          <li><img src="http://placehold.it/300&text=Placeholder" alt="" class="pull-left img-thumbnail img-responsive clearfix" width="200"></li>
                                          <li><img src="http://placehold.it/300&text=Placeholder" alt="" class="pull-left img-thumbnail img-responsive clearfix" width="200"></li>
                                       </ul>
                                    </div>
                                 </div>
                              </li>
                              <li class="timeline-danger">
                                 <div class="timeline-icon"><i class="ti ti-home"></i></div>
                                 <div class="timeline-body">
                                    <div class="timeline-header">
                                       <span class="author">Posted by <a href="#">David Tennant</a></span>
                                       <span class="date">Monday, November 21, 2013</span>
                                    </div>
                                    <div class="timeline-content">
                                       <h4>Consectetur Adipisicing Elit</h4>
                                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, officiis, molestiae, deserunt asperiores architecto ut vel repudiandae dolore inventore nesciunt necessitatibus doloribus ratione facere consectetur suscipit!</p>
                                    </div>
                                 </div>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <div class="tab-pane" id="tab-photos">
               <div class="panel">
                  <div class="panel-heading">
                     <h2>Photos</h2>
                  </div>
                  <div class="panel-body profile-photos">
                     <div class="row">
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                        <div class="col-md-3">
                           <img src="http://placehold.it/300&text=Placeholder" alt="" class="img-thumbnail img-responsive mb-xl">
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <div class="tab-pane" id="tab-edit">
               <div class="panel">
                  <div class="panel-heading">
                     <h2>Edit</h2>
                  </div>
                  <div class="panel-body">
                     <div class="row">
                        <div class="col-md-12">
                           <form class="form-horizontal tabular-form">
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">First Name</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.fname" class="form-control" id="form-fname" placeholder="John">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Last Name</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.lname"  class="form-control" id="form-lname" placeholder="Appleseed">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Class</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.class" class="form-control" id="form-class" placeholder="">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Division</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.division" class="form-control" id="form-division" placeholder="">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Date of Birth</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" id="dob" maxlength="10" ng-model="studentEditInfo.dob" class="form-control" id="form-division" placeholder="">
                                 </div>
                              </div>

                            
                              <div class="form-group">
                                 <label for="radio" class="col-sm-2 control-label">Gender</label>
                                 <div class="col-sm-8 tabular-border" ng-model="studentEditInfo.gender">
                                    <div class="radio block icheck"><label><input type="radio" name="gender" value="M"> Male</label></div>
                                    <div class="radio block icheck"><label><input type="radio" name="gender" value="F"> Female</label></div>
                                 </div>
                              </div>

                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Stream</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.stream" class="form-control" id="form-stream" placeholder="Engineering/ Medicine">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Section</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.section" class="form-control" id="form-section" placeholder="">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Address</label>
                                 <div class="col-sm-8 tabular-border">
                                    <textarea class="form-control fullscreen" ng-model="studentEditInfo.contactAddress"></textarea>
                                 </div>
                              </div>
                               <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">Locality</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.location" class="form-control" id="form-locality" placeholder="">
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label for="form-name" class="col-sm-2 control-label">City</label>
                                 <div class="col-sm-8 tabular-border">
                                    <input type="text" ng-model="studentEditInfo.city" class="form-control" id="form-city" placeholder="">
                                 </div>
                              </div>
                           </form>  
                        </div>
                     </div>
                  </div>
                  <div class="panel-footer">
                     <div class="row">
                        <div class="col-sm-8 col-sm-offset-2">
                           <button class="btn-primary btn" ng-click="saveEditChanges(studentEditInfo)">Save</button>
                           <a href="#tab-about"><button class="btn-default btn">Cancel</button></a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

         </div><!-- .tab-content -->
      </div><!-- col-sm-8 -->
   </div>
</div>

                            </div> <!-- .container-fluid -->
                        </div> <!-- #page-content -->
                    </div>
                    <footer role="contentinfo">
    <div class="clearfix">
        <ul class="list-unstyled list-inline pull-left">
            <li><h6 style="margin: 0;">&copy; 2015 Avenxo</h6></li>
        </ul>
        <button class="pull-right btn btn-link btn-xs hidden-print" id="back-to-top"><i class="ti ti-arrow-up"></i></button>
    </div>
</footer>

                </div>
            </div>
        </div>

    
    <!-- Switcher -->
    <div class="demo-options">
        <div class="demo-options-icon"><i class="ti ti-paint-bucket"></i></div>
        <div class="demo-heading">Demo Settings</div>

        <div class="demo-body">
            <div class="tabular">
                <div class="tabular-row">
                    <div class="tabular-cell">Fixed Header</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="success" data-off-color="default" name="demo-fixedheader" data-on-text="&nbsp;" data-off-text="&nbsp;"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Boxed Layout</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-boxedlayout" data-on-text="&nbsp;" data-off-text="&nbsp;"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Collapse Leftbar</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-collapseleftbar" data-on-text="&nbsp;" data-off-text="&nbsp;"></div>
                </div>
            </div>
        </div>

        <div class="demo-body">
            <div class="option-title">Topnav</div>
            <ul id="demo-header-color" class="demo-color-list">
                <li><span class="demo-cyan"></span></li>
                <li><span class="demo-light-blue"></span></li>
                <li><span class="demo-blue"></span></li>
                <li><span class="demo-indigo"></span></li>
                <li><span class="demo-deep-purple"></span></li> 
                <li><span class="demo-purple"></span></li> 
                <li><span class="demo-pink"></span></li> 
                <li><span class="demo-red"></span></li>
                <li><span class="demo-teal"></span></li>
                <li><span class="demo-green"></span></li>
                <li><span class="demo-light-green"></span></li>
                <li><span class="demo-lime"></span></li>
                <li><span class="demo-yellow"></span></li>
                <li><span class="demo-amber"></span></li>
                <li><span class="demo-orange"></span></li>               
                <li><span class="demo-deep-orange"></span></li>
                <li><span class="demo-midnightblue"></span></li>
                <li><span class="demo-bluegray"></span></li>
                <li><span class="demo-bluegraylight"></span></li>
                <li><span class="demo-black"></span></li> 
                <li><span class="demo-gray"></span></li> 
                <li><span class="demo-graylight"></span></li> 
                <li><span class="demo-default"></span></li>
                <li><span class="demo-brown"></span></li>
            </ul>
        </div>

        <div class="demo-body">
            <div class="option-title">Sidebar</div>
            <ul id="demo-sidebar-color" class="demo-color-list">
                <li><span class="demo-cyan"></span></li>
                <li><span class="demo-light-blue"></span></li>
                <li><span class="demo-blue"></span></li>
                <li><span class="demo-indigo"></span></li>
                <li><span class="demo-deep-purple"></span></li> 
                <li><span class="demo-purple"></span></li> 
                <li><span class="demo-pink"></span></li> 
                <li><span class="demo-red"></span></li>
                <li><span class="demo-teal"></span></li>
                <li><span class="demo-green"></span></li>
                <li><span class="demo-light-green"></span></li>
                <li><span class="demo-lime"></span></li>
                <li><span class="demo-yellow"></span></li>
                <li><span class="demo-amber"></span></li>
                <li><span class="demo-orange"></span></li>               
                <li><span class="demo-deep-orange"></span></li>
                <li><span class="demo-midnightblue"></span></li>
                <li><span class="demo-bluegray"></span></li>
                <li><span class="demo-bluegraylight"></span></li>
                <li><span class="demo-black"></span></li> 
                <li><span class="demo-gray"></span></li> 
                <li><span class="demo-graylight"></span></li> 
                <li><span class="demo-default"></span></li>
                <li><span class="demo-brown"></span></li>
            </ul>
        </div>


    </div>
<!-- /Switcher -->
    <!-- Load site level scripts -->

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> -->

<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>                      <!-- Load jQuery -->
<script type="text/javascript" src="assets/js/jqueryui-1.10.3.min.js"></script>                    <!-- Load jQueryUI -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>                       <!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/enquire.min.js"></script>                            <!-- Load Enquire -->

<script type="text/javascript" src="assets/plugins/velocityjs/velocity.min.js"></script>              <!-- Load Velocity for Animated Content -->
<script type="text/javascript" src="assets/plugins/velocityjs/velocity.ui.min.js"></script>

<script type="text/javascript" src="assets/plugins/wijets/wijets.js"></script>                     <!-- Wijet -->

<script type="text/javascript" src="assets/plugins/codeprettifier/prettify.js"></script>           <!-- Code Prettifier  -->
<script type="text/javascript" src="assets/plugins/bootstrap-switch/bootstrap-switch.js"></script>       <!-- Swith/Toggle Button -->

<script type="text/javascript" src="assets/plugins/bootstrap-tabdrop/js/bootstrap-tabdrop.js"></script>  <!-- Bootstrap Tabdrop -->

<script type="text/javascript" src="assets/plugins/iCheck/icheck.min.js"></script>                    <!-- iCheck -->

<script type="text/javascript" src="assets/plugins/nanoScroller/js/jquery.nanoscroller.min.js"></script> <!-- nano scroller -->

<script type="text/javascript" src="assets/js/application.js"></script>
<script type="text/javascript" src="assets/demo/demo.js"></script>
<script type="text/javascript" src="assets/demo/demo-switcher.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script> <!-- DateTime Picker -->

<!-- End loading site level scripts -->
    
    <!-- Load page level scripts-->
    
<script type="text/javascript" src="assets/plugins/form-fseditor/jquery.fseditor-min.js"></script>                   <!-- Fullscreen Editor -->
<script type="text/javascript" src="assets/plugins/bootbox/bootbox.js"></script>    <!-- Bootbox -->

<script type="text/javascript" src="assets/demo/demo-profile.js"></script>

    <!-- End loading page level scripts-->

    </body>
</html>