Scroll related inline image resizing I have been working the some project and I'm struggling to find the answer. Right now I'm coding with Angular and there some code that makes me write twice. There only two arrays now but if I have lots of arrays the code will be really big. The thing makes me stop always that I have to write the IDs one by one and I could not find the answer.

Please help me simplify the code even more.

$scope.allTheCont = [{
    styleClass: 'lftMn',
    theContId: 'theIdOne',
    pageNum: 'views/1.html',
    theOpn: function() {
        if ($scope.theIdOne) {
            return true
        };
    },
    imgClass: 'mainLeftImg',
    imgSrc: 'img/1.jpg',
    imgName: 'Traveling with sport',
    contClass: 'lftCnt',
    openCont: function() {
        $scope.all = false;
        $scope.theIdOne = true;
        $('.lftMn').addClass('lftMnOpnd')
        $('.lftCnt').addClass('mnCntOpnd')
        $('.mainLeftImg').addClass('mnImgOpnd')
        $location.hash('main');
        $anchorScroll();
    },
    closeCont: function() {
        $scope.all = true;
        $scope.theIdOne = false;
        $('.lftMn').removeClass('lftMnOpnd')
        $('.lftCnt').removeClass('mnCntOpnd')
        $('.mainLeftImg').removeClass('mnImgOpnd')
        $location.hash('theIdOne');
        $anchorScroll();
    }
}, {
    styleClass: 'mnRgtImg',
    theContId: 'theIdTwo',
    pageNum: 'views/2.html',
    theOpn: function() {
        if ($scope.theIdTwo) {
            return true
        };
    },
    imgClass: 'mnRgtImgs',
    imgSrc: 'img/2.jpg',
    imgName: 'Traveling with sport',
    contClass: 'mnRgtCnt',
    openCont: function() {
        $scope.all = false;
        $scope.theIdTwo = true;
        $('.mnRgtImg').addClass('mnRtOpnd')

        $('.mnRgtCnt').addClass('mnRtCntOpnd')
        $('.mnRgtImgs').addClass('mnRgtImgOpnd')
        $location.hash('main');
        $anchorScroll();
    },
    closeCont: function() {
        $scope.all = true;
        $scope.theIdTwo = false;
        $('.mnRgtImg').removeClass('mnRtOpnd')

        $('.mnRgtCnt').removeClass('mnRtCntOpnd')
        $('.mnRgtImgs').removeClass('mnRgtImgOpnd')
        $location.hash('theIdTwo');
        $anchorScroll();
    }

}]
You have a couple of methods that repeat themselves for the most part that could be factored out.  For example;

the openCont and closeCont are nearly identical, so you could factor them out to be their own function, for example,

var _openCont = function(theId, classesToSet) {
    $scope.all = false;
    $scope[theId] = true;
    for (var key in classesToSet) {
      $(key).addClass(classesToSet[key]);
    }
    $location.hash('main');
    $anchorScroll();
};


Which would be called like:

_openCont('theIdOne', {
  '.lftMn': 'lftMnOpnd',
  '.lftCnt': 'mnCntOpnd',
  '.mainLeftImg': 'mnImgOpnd'
});


Along with this, I'd recommend naming your variables more clearly.  Ideally code should be able to be read very easily even to a new set of eyes.  This will make maintainability far easier down the road.