auto switch toggle off if one is currently on

Question

there are nested toggle buttons which are off by default, when user turns one on it saves a value to localstorage. What i want to do is when one is turned on and you try to

Answer 1

I'm finding it hard to put the second js into the first one. I'm kinda confused since i'm new to angularjs

It sounds like you're trying to break up your app into separate JS files. Taking a tip from the Angular 1.x [Code] Style Guide on how you should break up your app, I would create a singular module setter file where you define the module and declare any module dependencies.

module.js

angular.module( 'app', [ ... ])

controller.js

So you're 1st and 2nd scripts are for the same controller as best I can tell. You do need to settle on one name or the other. I recommend 'Shops' as that is a standard naming convention for angular controllers. Just combine them like so:

angular.module( 'app' )
.controller( 'Shops', [
    '$scope','$http','$timeout',
    function( $scope, $http, $timeout ){
        $http.get('http://localhost/moves/templates/shopping.php')
        .success(function(data){ .... })


        $scope.pushNotification = {};
        $scope.pushNotification.text = "Sample"
        $scope.pushNotification.checked = false;

        $scope.pushNotificationChange = function(item) {
               console.log('Push Notification Change',         $scope.pushNotification.checked);
            if($scope.pushNotification.checked){
                localStorage.setItem("shop_id",($scope.item.shop_id));
            }else{
                localStorage.removeItem("shop_id");
            }
        }


         $scope.shops = [
          { shop_id: 1, shop_name: 'Shop One', checked: false },
          { shop_id: 1, shop_name: 'Shop One', checked: false },
          ...
         ]

         $scope.onItemChange = function(item) { ... }

Lastly you need to be sure to declare your module.js before your controller.js. I highly recommend a few things to you, seeing as you are new to Angular:

• start using the controller-as syntax
• start following some of the conventions outlined in that style guide.

I say this because if you plan to move to Angular 2 at some point, being well-practiced in these conventions will ease the migration process.

Answer 2

note: You've edited your question enough that my prior answer isn't valid in any way.

Your toggle UX can easily be addressed with Angular's native input[radio] implementation. You need to simply define two inputs using both ngModel and ngValue on each input:

<input type="radio" 
       ng-model="vm.selected" 
       ng-value="'foo'"/>

<input type="radio" 
       ng-model="vm.selected" 
       ng-value="'bar'"/>

You can also use ng-change to trigger the active_shop function:

<input type="radio" 
       ng-model="vm.selected" 
       ng-value="'foo'" 
       ng-change="active_shop();"/>

codepen example

The other option is to utilize ui.bootstrap's radio button implementation (if you're indeed using Bootstrap to style your app.