Can't Receive MVC ViewBag(always null) property after $http post - angularjs

Question

I am using MVC 5 with angularjs and SSRS 2008 R2 and just trying to display report posted data by angularjs form and display it in #Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { Height = 600, Width = 1200, SizeToReportContent = true, frameBorder = "0", })
My MVC Controller is returning this
ViewBag.ReportViewer = reportViewer;
return View(); but my post angularjs function is not getting any ViewBag.REportViewer property on response data.
Please just let me know if I am making any mistake while posting, because always my ViewBag.ReportViewer is null.
Please see (html) for #html.ReportViewer at the bottom and (angularjs $http.post) postIncomingMaterialData for call.
Sorry I pasted most of the code here, but had no choice.
Thanks.
(function() {
'use strict'
angular.module('GAiiNSApp').controller('GFIReportModalCtrl', ['$scope', 'getEmployeeNameFctry', 'getGrvNoFctry', '$http', '$log', '$rootScope', '$filter',
function($scope, getEmployeeNameFctry, getGrvNoFctry, $http, $log, $rootScope, $filter) {
$scope.getGRVNo = function(val) {
return getGrvNoFctry.getGRVNoData('/Stores/StoresAPI/GetGRVNo', val).then(function(res) {
var grvNo = [];
angular.forEach(res.data, function(OBJ) {
grvNo.push((OBJ));
});
return grvNo;
});
};
$scope.getEmployee = function(val) {
return getEmployeeNameFctry.getData('/Stores/StoresAPI/GetEmployee', val).then(function(res) {
var users = [];
angular.forEach(res.data, function(OBJ) {
users.push((OBJ.NAME).trim());
});
return users;
});
};
$scope.SubmitData = function() {
$scope.myobject = {};
$scope.myobject.StartDate = $scope.Date1;
$scope.myobject.EndDate = $scope.Date2;
.employeename = $scope.empName;
$scope.myobject.grvno = $scope.grvNo;
$http({
method: "POST",
url: '/Stores/Materials/IncomingMaterial',
params: {
StartDate: $scope.myobject.StartDate,
EndDate: $scope.myobject.EndDate,
HandedOverTo: $scope.myobject.employeename,
GRVNo: $scope.myobject.grvno,
},
cache: false
});
}
}
]);
})();
(function() {
angular.module('GAiiNSApp').factory('postIncomingMaterialData', ['$http'], function($http) {
$http({
method: "POST",
url: MYURL_URL,
data: myObject,
cache: false
});
});
})();
(function() {
angular.module('GAiiNSApp').factory('getEmployeeNameFctry', ['$http', '$q',
function($http, $q) {
return {
getData: function(url, val) {
return $http({
url: url,
method: "GET",
params: {
nameSearch: val,
}
});
}
}
}
]);
})();
(function() {
'use strict'
angular.module('GAiiNSApp').factory('getGrvNoFctry', ['$http', '$q',
function($http, $q) {
return {
getGRVNoData: function(url, val) {
return $http({
url: url,
method: "GET",
params: {
grv: val,
}
});
}
}
}
]);
})();
#using ReportViewerForMvc; #using System.Drawing #using Microsoft.Reporting.WebForms; #using System.Web.UI.WebControls
<script src="~/Areas/Stores/Controllers/StoresNG/StoresCtrl.js"></script>
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 10px; min-height: 500px; margin-left: 10px;" ng-controller="GFIReportModalCtrl">
<fieldset>
<h3>Report</h3>
<hr />
<form name="MeForm" class="form-inline" novalidate>
<div class=" form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="date1">Start Date:<span style="color:red">*</span>
</label>
<p class="input-group">
<input type="text" id="date1" name="fdate" class="form-control" uib-datepicker-popup="{{$root.format}}" ng-model="$root.Date1" is-open="$root.popup1.opened" datepicker-options="$root.dateOptions1" ng-required="true" close-text="Close" alt-input-formats="$root.altInputFormats"
uib-tooltip="Date must be in dd-mm-yyyy format" tooltip-placement="top-right" tooltip-trigger="'mouseenter'" tooltip-enable="!inputModel" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<p class="error validationerror" ng-show="MeForm.fdate.$invalid && MeForm.fdate.$touched">Start date is required</p>
</p>
</div>
<div class=" form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="date2">End Date:<span style="color:red">*</span>
</label>
<p class="input-group">
<input type="text" id="date2" name="ldate" class="form-control" uib-datepicker-popup="{{$root.format}}" ng-model="$root.Date2" is-open="$root.popup2.opened" datepicker-options="$root.dateOptions2" ng-required="true" close-text="Close" alt-input-formats="$root.altInputFormats"
uib-tooltip="Date must be in dd-mm-yyyy format" tooltip-placement="top-right" tooltip-trigger="'mouseenter'" tooltip-enable="!inputModel" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<p class="error validationerror" ng-show="MeForm.ldate.$invalid && MeForm.ldate.$touched">End date is required</p>
</p>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="HandOver">Handed Over To:</label>
<input type="text" id="HandOver" ng-model="empName" uib-typeahead="name for name in getEmployee($viewValue)" typeahead-loading="loadingName" typeahead-no-results="noResults" typeahead-editable="false" typeahead-min-length="3" typeahead-wait-ms="500" class="form-control">
<i ng-show="loadingName" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found...
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="GRVNo">GRV No:</label>
<input type="text" id="GRVNo" ng-model="grvNo" uib-typeahead="grvno for grvno in getGRVNo($viewValue)" typeahead-loading="loadingGRVNo" typeahead-no-results="noResults" typeahead-editable="false" typeahead-min-length="3" typeahead-wait-ms="500" class="form-control">
<i ng-show="loadingGRVNo" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found...
</div>
</div>
<div class="row">
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
<br />
<br />
<div class="form-group col-xs-3 col-sm-3 col-md-3 col-lg-3 pull-right">
<button type="submit" class="btn submitbtn" ng-click="SubmitData()">Submit</button>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12" style="border: red;">
<div>
<div>
</div>
#{ if (ViewBag.ReportViewer != null) { #Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { Height = 600, Width = 1200, SizeToReportContent = true, frameBorder = "0", }) } else {
<p>Message -- The ViewBag is still null</p>
} }
</div>
</div>
</form>
</fieldset>
</div>