I'm looking for a way to reset my Angular page back to its original state with just one button click. I attempted to use the angular.copy method, but encountered an error. I have various scope and controller variables that I don't want to reset individually. Any suggestions on how to efficiently achieve this reset functionality?
Edit 1: I tried implementing Ben Felda's solution in my controller code, but it didn't work as expected. Here is the snippet of my controller and HTML code:
/* Controller Code */
var app = angular.module('myApp',['ngRoute']);
var MyCtrl = function($route, $scope, $log, $http, $sce, $q, $filter) {
// Controller Variables
};
MyCtrl.prototype.reset = function() {
/* Reset Functionality */
};
MyCtrl.prototype.getInfo = function() {
/* Get Info Functionality */
};
MyCtrl.$inject = ['$route','$scope', '$log', '$http', '$sce', '$q', '$filter'];
app.controller('MyCtrl', MyCtrl);
/* HTML Code */
<form ng-submit="dp.getInfo(dp.id)" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" ng-model="dp.id" class="form-control" required/>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I have made sure to include the necessary scripts in my index.html file, but still facing issues. Any insights on what might be causing the problem?