Question: I have an app with angularjs and jquery. I have some jquery in the following angularjs script:

```
//allow co-existence of jquery and angular 
var $jq = jQuery.noConflict();
//initialize an angular scoped variable taht will be manipulated and used by jquery object
$scope.myOption1 = true;

//jquery ready function
$jq(function() {
   var myGadget = $jq('.gadget-container').gadget({ 
     option1:  $scope.myOption1
   });
});

//angular function to manipulate the jquery object (which represents an image slider)
$scope.myFunction = function() {
  //change myOption1 to false
  $scope.myOption1 = false;

  //re-initialize myGadget with new myOption1 value
  myGadget.reInit();    //reInit is a built-in function for myGadget to reinitialize the gadget when options change

}

```

Jquery can access $scope.myOpyion1 just fine. But angular throws the error "myGadget is not defined" when the angular function $scope.myFunction runs. I understand why - it's looking for angular variable, not jquery variable. So how can I access the jquery variable myGadget in angular functions?

Answer: 
`myGadget` isn't in scope. Declare `myGadget` outside of your `ready` closure:

```
//allow co-existence of jquery and angular 
var $jq = jQuery.noConflict();
//initialize an angular scoped variable taht will be manipulated and used by jquery object
$scope.myOption1 = true;

$scope.myGadget = null;

//jquery ready function
$jq(function() {
   $scope.myGadget = $jq('.gadget-container').gadget({ 
     option1:  $scope.myOption1
   });
});

//angular function to manipulate the jquery object (which represents an image slider)
$scope.myFunction = function() {
  //change myOption1 to false
  $scope.myOption1 = false;

  //re-initialize myGadget with new myOption1 value
  $scope.myGadget.reInit();    //reInit is a built-in function for myGadget to reinitialize the gadget when options change

}

```
You are creating `myGadget` in a private scope.

Although there is a lot to improve, try

```
var myGadget;

//jquery ready function
$(function() {
   myGadget = $('.gadget-container').gadget({ 
     option1:  $scope.myOption1
   });
});

//angular function to manipulate the jquery object (which represents an image slider)
$scope.myFunction = function() {
  //...

  myGadget.reInit();
}

```

BTW `angular.element === jQuery` in case jQuery is used along with Angular

and it's not required to use `$jq` and `noConflict` because angular doesn't overwrite `$` symbol