$rootScope not accessible in controller

Question

I actually made a $rootScope available at module run which is completely accessible from view but I want to access that value inside another controller, unfortunately I am not able to access that. Please suggest some way.

1. I previously tried to make these datepicker popup options availble through the service but failed to do that as I have no idea about services/factory how to use them. More importantly I am getting the updated value in views but the same updated value I want in my controller so it can be assigned to different scope variable. If someone can make the below code for me inside a service and then atleast I will get the idea and start to create other injectable services.

 angular.module("TestApp", ["ui.bootstrap"]) .run(['$rootScope', function ($rootScope) { $rootScope.clear = function () { $rootScope.Date1 = null; $rootScope.Date2 = null; $rootScope.Date1(); }; $rootScope.inlineOptions1 = { customClass: getDayClass, minDate: new Date(), // showWeeks: true }; $rootScope.inlineOptions2 = { customClass: getDayClass, minDate: new Date(), // showWeeks: true }; $rootScope.dateOptions1 = { //dateDisabled: disabled, formatYear: 'yyyy', maxDate: new Date(2050, 7, 22), minDate: new Date(), startingDay: 1 }; $rootScope.dateOptions2 = { //dateDisabled: disabled, formatYear: 'yyyy', maxDate: new Date(2050, 5, 22), minDate: new Date(), //minDate: new Date($$rootScope.changeMin()), startingDay: 1 }; $rootScope.toggleMin = function () { $rootScope.inlineOptions1.minDate = $rootScope.inlineOptions1.minDate ? null : new Date(); $rootScope.dateOptions1.minDate = $rootScope.inlineOptions1.minDate; var min2 = new Date(); $rootScope.$watch('Date1', function () { min2 = $rootScope.Date1; $rootScope.dateOptions2.minDate = min2; if ($rootScope.Date1 > $rootScope.Date2) { $rootScope.Date2 = $rootScope.Date1; } }, true); $rootScope.$watch('Date2', function () { if ($rootScope.Date2 < $rootScope.Date1) { $rootScope.Date1 = $rootScope.Date2; } }, true); }; $rootScope.toggleMin(); $rootScope.open1 = function () { $rootScope.popup1.opened = true; }; $rootScope.open2 = function () { $rootScope.popup2.opened = true; }; $rootScope.popup1 = { opened: false }; $rootScope.popup2 = { opened: false }; $rootScope.setDate = function (year, month, day) { $rootScope.Date1 = new Date(year, month, day); $rootScope.Date2 = new Date(year, month, day); }; $rootScope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate']; $rootScope.format = $rootScope.formats[2]; $rootScope.altInputFormats = ['M!/d!/yyyy']; function getDayClass(data) { var date = data.date, mode = data.mode; if (mode === 'day') { var dayToCheck = new Date(date).setHours(0, 0, 0, 0); for (var i = 0; i < $rootScope.events.length; i++) { var currentDay = new Date($rootScope.events[i].date).setHours(0, 0, 0, 0); if (dayToCheck === currentDay) { return $rootScope.events[i].status; } } } return ''; } }]); //This is my Controller angular.module('TestApp').controller('MyDates', ['$scope', '$log', '$rootScope', function ($scope, $log, $rootScope) { $scope.dt1 = $rootScope.Date1; console.log($scope.dt1); //Not showing anything.... console.log($rootScope.Date1); }]); 

 <script src="~/Scripts/fromscript.js"></script> <fieldset> <form name="MeForm" novalidate> <div ng-controller="MyDates"> <div class="row"> <div class="col-md-3"> <div> <p class="input-group"> <input type="text" 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" /> <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">First date is required</p> </p> </div> {{Date1 | date: 'dd-MM-yyyy'}} <div> <p class="input-group"> <input type="text" 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" /> <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">Last date is required</p> </p> </div> {{Date2 | date: 'dd-MM-yyyy'}} </div> </div> </div> </form> </fieldset> 

Answer 1

It's very simple to use service. Have a look at the following example.

var testModule = angular.module('testmodule', []);

testModule
   .controller('QuestionsStatusController1',['$rootScope', '$scope', 'myservice', function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;
   }]);

testModule
   .controller('QuestionsStatusController2',['$rootScope', '$scope', 'myservice',function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;
   }]);

testModule
    .service('myservice', function() {
       this.xxx = "yyy";
    });

Plunker