observing controller's scope from within the isolated scope of a directive

My dropdown selection is updating the variable in my controller, but the watch directive is not being triggered.

<select ng-model="storesid" ng-change="changeVal(storesid)" ng-options="store.name for store in stores">
                <option value="">
            </option>
                </select>

In my controller:

app.controller("segmentCtrl",function($scope,$rootScope,segmentService,lookupService){
    $scope.changeVal = function(item){
    $scope.timeSeries = item;
   }
})

I also have a directive:

In the directive, I am trying to watch for changes:

.directive('timeseries1',function(){
return{
    restrict:'E',
    scope:{
      val:'='
    },
    link:function(scope,element,attrs){
        scope.$watch('timeSeries',function(){ 

        })   
    }
}
})
<div ng-controller="segmentCtrl">
 <timeseries1 id="dualAxisAreaContainer4" val="timeSeries" ></timeseries1> 
</div>

Answer №1

Make sure to keep an eye on the variable labeled "val" within your directive scope.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a comma-separated list into an array and filling a dropdown menu with the values

I am facing a challenge with integrating a list of countries dynamically: <div>Argentina, Brazil, Colombia, Ecuador</div> My goal is to convert these countries into options within a combobox dropdown in the specified format: options: [ { ...

"Use the data-attribute to dynamically append a child element to the

Here are a couple of divs that look like this: <div id="thisisme" data-order="1"> <div id="thisisme" data-order="2"> I am looking to insert some content into the specific div with data-order = 1. The following Javascript code is what I have t ...

Trouble with React Material Select Options Failing to Populate

After iterating and producing MenuItems, I am able to see the items when I console.log, but in the UI, the dropdown appears empty. I'm puzzled as to why the Select's are not being populated. Any thoughts on this issue? Below is the supplied code ...

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...

Hold off until the asynchronous function has completed - Ionic2

I am developing in Ionic2 and encountering an issue: Within my component, there is a method called drawPlayer that fetches data from a Firebase database. Here is the code for this method: drawPlayer(){ this.playerData.drawThePlayer().on('value&a ...

Error occurred during Apple Login using Next_Auth: OAuthCallback issue

Attempting to log in with Apple using NextAuth. Authentication is successful, but it redirects to /?error=OAuthCallback. The URL being used is: https://appleid.apple.com/auth/authorize?client_id=com.wheeleasy.org&scope=name%20email&response_type= ...

Ways to refresh the child scope in Angular using an array

When receiving an array of data from the server in AngularJS, I need to dynamically update the $scope. The initial value is : $scope.form = {}; I would like to update it dynamically as follows: $scope.form = {"firstname" : "Alex"}; Both 'firstnam ...

Double-tap bug with Image Picker in Typescript React Native (non-expo)

Well, here’s the situation - some good news and some bad news. First, the good news is that the code below is functioning smoothly. Now, the not-so-good news is that I find myself having to select the image twice before it actually shows up on the clie ...

Passing objects to an AngularJS form using UIB TypeAhead without two-way binding

In my current situation, I am encountering an issue with a typeahead feature on a repeating form element that consists of 5 input fields. While everything functions correctly when selecting results and populating the input fields, the model does not get up ...

Encountered error message: "Cannot assign argument of type '() => () => boolean' to parameter of type 'EffectCallback'"

I recently started working with TypeScript. I encountered an issue when attempting to utilize useEffect in TypeScript within a React context, Error: Argument of type '() => () => boolean' is not assignable to parameter of type 'Effec ...

The callback function in jQuery does not function properly in a custom class or object

Hello, I am new to the world of programming so bear with me if this question seems basic. I am currently working on creating a simple wave effect to give the illusion of moving water. Initially, I achieved this using a straightforward jQuery function which ...

"Troubleshooting AmCharts: How to Resolve Missing Data on Graphs/Implementing AJAX for AmCharts Data Visualization/Querying a Database to Dynamically

After writing some HTML and JavaScript code, I'm trying to set up an amcharts plot. To do this, I fetch data from a database using PHP, convert it into JSON format, and then pass it to the graph for display. The issue arises when I try to assign the ...

AngularJS HTTP POST request encountering issue with success function not functioning as expected

I am currently working on implementing a basic HTTP post request to insert data into my database. The following pages are involved: register.php contains the registration form. maincons.js houses the application controllers. sqlregister.php include ...

Updating information in the view when tabs are clicked in AngularJS

As a beginner in Angular, I'm seeking some guidance! I have a webpage with three tabs (using Angular Material for tab functionality) that display different sets of records. Each tab should show records based on their status (e.g., OPEN tab displays & ...

"Resetting the state of a form in AngularJS2: A step-by

Looking to reset the form state from dirty/touched in angular? I am currently delving into the world of angular2 and working on a form with validation. In my journey, I came across this code snippet: <form *ngIf="booleanFlag">..</form> This ...

Tips for passing a function reference within a recursive directive in AngularJS

Here is a directive I am working with: app.directive('recursiveListItem', ['$http', 'RecursionHelper', function ($http, RecursionHelper) { return { restrict: 'E', scope: { parent: &ap ...

Removing an object from a JSON array based on checkbox selection in Angular 4

0: CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4" Code: "GMA0300" Description: "PA-5215: Renamed" Enabled: true Favorite: false Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd" InstrumentType: null Moniker: "1GMA0300" Name: "Celiac Disease Panel (tTG IgG, tT ...

You must add the module-alias/register to each file in order to use path aliases in

I am currently utilizing typescript v3.6.4 and have the following snippet in my tsconfig.json: "compilerOptions": { "moduleResolution": "node", "baseUrl": "./src", "paths": { "@config/*": ["config/*"], "@config": ["config"], ...

Implementing NPM commands in Jenkins using shell scripting

Whenever I attempt to run the "npm" command, I encounter a syntax error. Users/Shared/Jenkins/Home/workspace/projectName/npm test ^^^^ SyntaxError: Unexpected identifier This is the Jenkins Build shel ...

I encountered an error message while running the Angular JS code that I had written, and I am unable to find a solution to resolve it

Every time I attempt to run ng serve, the following error message pops up: "The serve command requires to be run in an Angular project, but a project definition could not be found." I've already experimented with various commands like: npm cache clean ...