inbox outbox in Angular

by Samar Pattanayak

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myController">

<div>
  <a href="#a" ng-click="tabchange(this,0,'inbox')">Inbox</a>
  <a href="#b" ng-click="tabchange(this,1,'outbox')">Outbox</a>
  <a href="#c" ng-click="tabchange(this,2,'draft')">Draft</a>
</div>
<div id="mainCont">
  <div id="a" style="display:none">
    <p>
      <b>Inbox Page</b>
    </p>
    <p>
      <input type="checkbox" id="allC" ng-click="checkall(this)"/>Select all
      <input type="button" value="Delete selected items" ng-click="delete()"/>
    </p>
    <table>
      <tr ng-repeat="in in inboxAr">
        <td>{{in.id}}<input type="checkbox" id="{{in.id}}" ng-model="selection.ids[in.id]" class="allcheck" ng-click="checkind(this)"/></td>
        <td>{{in.name}}</td>
        <td>{{in.type}}</td>
        <td>{{in.from}}</td>
        <td>{{in.date}}</td>
      </tr>
    </table>
  <pre ng-bind="selection.ids | json"></pre> 
  </div>
  <div id="b" style="display:none">
    <p>
      <b>Outbox Page</b>
    </p>
    <table>
      <tr ng-repeat="in in inboxAr">
        <td>{{in.name}}</td>
        <td>{{in.type}}</td>
        <td>{{in.from}}</td>
        <td>{{in.date}}</td>
      </tr>
    </table>
  </div>
  <div id="c" style="display:none">
    <p>
      <b>Draft Page</b>
    </p>
    <table>
      <tr ng-repeat="in in inboxAr">
        <td>{{in.name}}</td>
        <td>{{in.type}}</td>
        <td>{{in.from}}</td>
        <td>{{in.date}}</td>
      </tr>
    </table>
  </div>
</div>

</div>

CSS

.cl {
  display: none;
}
.allcheck{
  opacity:0.8
}

JavaScript

var app = angular.module("myApp", []);

app.controller("myController", function($scope) {
	$scope.selection = {
        ids: {}
  };
  $scope.obj = [{
  	id :1,
    name: "samar",
    type: "inbox",
    from: "A",
    date: "today"
  }, {
  	id :2,
    name: "Ram",
    type: "inbox",
    from: "AB",
    date: "today"
  }, {
  	id :3,
    name: "Raman",
    type: "outbox",
    from: "A",
    date: "today"
  }, {
  	id :4,
    name: "Ravi",
    type: "outbox",
    from: "A",
    date: "today"
  }, {
  	id :5,
    name: "Jyotu",
    type: "inbox",
    from: "A",
    date: "today"
  }, {
  	id :6,
    name: "Gita",
    type: "draft",
    from: "A",
    date: "today"
  }, {
  	id :7,
    name: "Her",
    type: "draft",
    from: "A",
    date: "today"
  }]
  
  $scope.tabchange = function(a, number,type) {
    var href = document.getElementsByTagName("a")[number].getAttribute("href")
    console.log(href.substring(1));
    document.getElementById(href.substring(1)).style.display = "block";
    var checl = $('#' + href.substring(1)).siblings();
    $('#' + href.substring(1)).siblings().css("display", "none");
    
    console.log(type)
    $scope.inboxAr = $scope.obj.filter(function(a) {
    	return a.type == type;
  	})
  }
  $scope.checkall = function(ch){
  	var checparent=$('#allC')[0].checked;
  	var tdcheck= document.getElementsByClassName("allcheck");
    for(var i=0; i < tdcheck.length; i++){
    	tdcheck[i].checked=checparent;
    }
  }
  $scope.checkind = function(th){
  	
    //console.log($scope.selection.ids);
    //console.log(Object.keys($scope.selection.ids).length)
  	var count=0;
    var idArray=[];
    for(var key in $scope.selection.ids){
    	//console.log(key,$scope.selection.ids[key])
      if($scope.selection.ids[key]== true){
      	count++;
      }
    }
    //console.log(idArray);
    //console.log(document.getElementsByClassName("allcheck").length)
  	//if($('input:checkbox[class=allcheck]:checked').length ==...